注意这里 class 使用 active-class="_active"。
exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link></p>event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：
路由实例你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
# 安装依赖，使用淘宝资源命令 cnpmcnpm install# 启动应用，地址为 localhost:8080cnpm run dev
如果你需要发布到正式环境可以执行以下命令：
cnpm run build
执行成功后，访问 http://localhost:8080 即可看到如下界面：
lunatic
138***895@qq.com
参考地址
exact-active-class 和 active-class 的区别
router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 <router-link to="/article">，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class，例如：
当用户访问 /article/1 时会被激活为：
而当使用：
当用户访问 /article/1 时，不会激活这个 link 的 class：
lunatic
138***895@qq.com
参考地址
星羽1704
147***5050@qq.com
在 vue 中多次切换相同一个路由会存在问题。
解决方案：
1、每次切换路由之前手动判断:
if(this.$route.name!='xxxx'){ this.$router.push({name:'xxxx'});}2、在创建路由规则对象之后加入如下配置:
const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function(location) { return originalPush.call(this, location).catch(err => err)};