Vue-router，router-link的一些其他属性

<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()方法