<router-link to="/home" tag="button" active-class="active" replace>首页</router-link>
<router-link to="/about" tag="button" active-class="active" replace>关于</router-link>
可以通过添加tag属性来修改router-link默认渲染的标签。
可以通过添加active-class属性来修改当前处于活跃状态所添加的class。
可以通过添加replace属性来修改添加path的途径，（将history.pathState修改为history.replaceState），这样就不能通过前进后退返回组件。
const router = new VueRouter({
routes,
mode: "history",
linkActiveClass: "active"
})
上面所说的修改活跃状态的active，需要将每个router-link都添加这一属性。这时就可以在router文件下的Index.js（router的配置文件）里面添加linkActiveClass属性来统一修改活跃状态所添加的class。
全局导航守卫
可以通过全局守卫来修改跳转之后的网页名字
先在router的配置文件中加入meta属性
const routes = [
{
path: "/home",
component: Home,
meta: { //这里添加meta属性
title: "首页"
}
},
{
path: "/about",
component: About,
meta: { //这里添加meta属性
title: "关于"
}
}
const router = new VueRouter({
routes,
mode: "history",
linkActiveClass: "active"
})
然后在router的配置文件下面添加如下
router.beforeEach((to , from , next) => {
// 从from路由，跳转到to路由，这里的to,from都是指的跳转前后的组件
document.title = to.meta.title
next()
})
当在组件中拥有子组件路由时，会出现指向错误，所以最终应该用这种方式
router.beforeEach((to , from , next) => {
// 从from路由，跳转到to路由，这里的to,from都是指的跳转前后的组件
document.title = to.matched[0].meta.title
next()
})
要注意的是一定要在这里使用next()方法
