vue系列教程-11vuerouter路由

本内容为系列内容，全部内容请看我的vue教程分类

• 我的个人博客
• 本节仓库地址
• 视频教程地址

什么是路由

大家还记得我最开始提到的spa单页面吗，通过不同的路径显示不同的组件，这个就是通过router实现的

那么首先我们还需要引入一个 router文件

<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

这里的话我们还是以上面的bilibili消息中心为示例，使用到刚刚的代码

还是先定义组件模板

<template id="writeback">
    <div>
        <div>回复我的</div>
        <div>这是回复我的界面</div>
    </div>
</template>
<template id="aite">
    <div>
        <div>@我的</div>
        <div>这是@我的界面</div>
    </div>
</template>
<template id="zan">
    <div>
        <div>收到的赞</div>
        <div>这是收到赞的界面</div>
    </div>
</template>

然后定义组件

const writeback = {
   
    template: '#writeback'
}
const aite = {
   
    template: '#aite'
}
const zan = {
   
    template: '#zan'
}

基础使用

在组件那一节我们是通过动态组件来实现界面切换的，这里我们就使用路由来实现页面切换

这里我们实例化vue的时候，属性里面的 router传入一个 VueRouter 的实例，这个数组routes就是详细的路径和对应的组件信息，比如我们浏览器访问 www.lookroot.cn/writeback的时候，页面就展示上面定义好的 writeback组件

let vm = new Vue({
   
    el: '#app',
    data() {
   
    },
    router: new VueRouter({
   
        routes: [
            {
   
                path: '/writeback',
                component: writeback
            },
            {
   
                path: '/aite',
                component: aite
            },
            {
   
                path: '/zan',
                component: zan
            },
        ],
    })
})

那么原本的导航也要进行修改 这个 router-link就会在页面中渲染成a标签，作为导航

<div class="bili-leftnav">
    <ul>
        <li>
            <router-link to="/writeback">回复我的</router-link>
        </li>
        <li>
            <router-link to="/aite">@我的</router-link>
        </li>
        <li>
            <router-link to="/zan">收到赞的</router-link>
        </li>
    </ul>
</div>

那么我们原本的选中效果是没有了的因为没有绑定点击事件，但是路由会给默认激活的导航加上一个class名为router-link-active ，我们简单编写一下

 /* 当前显示路由的颜色 */
 .bili-content .bili-leftnav li .router-link-active {
   
     color: #2fbbea;
 }

然后和动态组件一样要有个展示的容器吧，这里我们也给它加上过渡动画，这个router-view就是路由界面的展示容器和动态组件的