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/[email protected]/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
                    }
                }
            ]
        })