您现在的位置是:首页 >学无止境 >vue中的路由使用网站首页学无止境

vue中的路由使用

承諾太轻 2024-06-17 10:29:51
简介vue中的路由使用

什么是路由

后端路由

后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。

前端路由

前端路由:对于单页面应用程序来说,这主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容,所有,单页面程序中的页面跳转主要用hash实现。

路由的基本使用

1、引入js文件,这个js需要放在vue.js的后面,自动安装(提供了一个VueRouter的构造方法);
2、创建路由new VueRouter(),接受的参数是一个对象;
3、在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性,path属性的url地址,component属性就是显示的组件(传组件的对象);
4、创建的路由需要和vue实例关联在一起;
5、路由到的组件显示在哪个位置

//引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1、引入js文件,这个js需要放在vue.js的后面,自动安装(提供了一个VueRouter的构造方法) -->
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//html代码:
    <div id='app'>
        <!-- 5、预留展示区域 -->
        <router-view></router-view>
    </div>
//路由实例代码:
     const router = new VueRouter({
            // 3、创建映射关系
            routes: [
                {
                    path: ',
                    component: 
                }
            ]
        })
//vue实例代码:
        const vm = new Vue({
            // 4、将路由实例挂载到vue实例上
            router: router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })

路由的跳转和传参

路由的跳转和传参有两种方式:一种是声明式跳转和传参;一种是函数式路由跳转和传参。

路由的跳转

路由的跳转用标签中的to属性设置

<router-link to="/detail">去详情页</router-link>

声明式路由跳转和传参

声明式路由跳转和传参是有两种办法:一种是path搭配query使用,一种是name搭配params使用

path搭配query使用

 <router-link :to="{path:'/detail',query:{courseid:123} }">去详情1</router-link>

name搭配params使用

使用name搭配params使用的时候要给需要跳转的路由对象上加name。

 <router-link :to="{name:'my',params:{id:234} }">去个人中心</router-link>

函数式路由跳转和传参

      <template id="index">
        <div>
            <button @click="toDetail">toDetail</button>
            <button @click="toMine">toMine</button>
        </div>
      </template>
      
       let index = {
            template: '#index',
            methods: {
                toDetail() {
                    console.log(1);
                    this.$router.push({
                        path: '/detail',
                        query: {
                            id: 23414
                        }
                    })
                },
                toMine() {
                    this.$router.push({
                        name: 'my',
                        params: {
                            id: 45634
                        }
                    })
                }
            }
        }
      

路由的嵌套

1、声明路由的时候设置children,这里children是一个数组,数组里是路由对象;
2、这个children的组件就会渲染在它的父组件的中

    <template id="detail">
        <div>
            详情页
            <router-view></router-view>
        </div>
    </template>
    <template id="play">
        <div>
            play
        </div>
    </template>
    <template id="study">
        <div>
            study
        </div>
    </template>
    const router = new VueRouter({
            // 3、创建映射关系
            routes: [
                {
                    path: '/detail',
                    component: detail,                    children: [
                        {
                            path: 'play',
                            component: play
                        },
                        {
                            path: 'study',
                            component: study
                        }
                    ]
                }
            ]
        })

命名视图

1、之前只能一个地址对应一个组件,现在可以一个地址对应多个组件;
2、用components属性设置;
3、给router-view设置名字,这个名字和components组件名字是对应的;
4、设置默认值default对应组件可以设置名字也可以访问。

 const router = new VueRouter({
            // 3、创建映射关系
            routes: [
                {
                    path: '/index',
                    // component: index
                    // 命名视图
                    components: {
                        default: index,
                        detail,
                        mine
                    }
                }
            ]
        })
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。