本内容为系列内容，全部内容请看我的vue教程分类
我的个人博客
本节仓库地址
视频教程地址
什么是路由大家还记得我最开始提到的spa单页面吗，通过不同的路径显示不同的组件，这个就是通过router实现的
那么首先我们还需要引入一个 router文件
<script src="http://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>这里的话我们还是以上面的bilibili消息中心为示例，使用到刚刚的代码
还是先定义组件模板
<template> <div> <div>回复我的</div> <div>这是回复我的界面</div> </div> </template> <template> <div> <div>@我的</div> <div>这是@我的界面</div> </div> </template> <template> <div> <div>收到的赞</div> <div>这是收到赞的界面</div> </div> </template>然后定义组件
const writeback = { template: \'#writeback\' } const aite = { template: \'#aite\' } const zan = { template: \'#zan\' } 基础使用在组件那一节我们是通过动态组件来实现界面切换的，这里我们就使用路由来实现页面切换
这里我们实例化vue的时候，属性里面的 router传入一个 VueRouter 的实例，这个数组routes就是详细的路径和对应的组件信息，比如我们浏览器访问 的时候，页面就展示上面定义好的 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> <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就是路由界面的展示容器和动态组件的component是一样的
<div> <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeInUp" mode="out-in" :duration="200"> <router-view></router-view> </transition> </div>好的这就完成了改造了看看效果吧完全是可以的，注意看路径的变化
如果我们打开这个界面的时候，路径后面没有跟着具体的路径，界面就不会显示任何的组件，这肯定是不友好的
必须设置一个默认界面，我们咋路由配置文件里面增加一个路由信息
{ path: \'/\', redirect: \'/writeback\', },这里的意思就是，默认为初始界面的时候，就重定向到 writeback这个路径，这样writeback就成了默认界面了
命名视图和命名路由 命名视图如果我们页面中同时有两个的时候，点开页面要展示两个组件，那么你怎么知道哪个组件应该展示到哪个 view里面呢？这就是命名视图
我们在添加一个 view，并且name为 common
<div> <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeInUp" mode="out-in" :duration="200"> <router-view></router-view> </transition> <router-view></router-view> </div>定义一个组件模板
<template> <div> <h2>footer</h2> </div> </template>定义这个组件
const vuefooter = { template: \'#vuefooter\' }然后修改一下 writeback的路由配置,component就换成components了，并且默认的容器展示writeback组件，命名为common的容器展示 刚刚定义的这个vuefooter组件
{ path: \'/writeback\',//点击的路径 // 命名视图 components: { default: writeback, common: vuefooter }, },看看效果，是可以的，这就是命名视图