多页面应用我们可以给每一个页面都设置一个不同的标题,但是如果是单页面应用的路由呢?其实也是可以实现的,实现的方法不止一种,我之前用的是结合命名路由和导航钩子函数的方法。如下:

// 定义路由的时候如下定义,name也可为中文
const routes = [
  { path: '/goods', component: goods, name: 'goods' },
  { path: '/ratings', component: ratings, name: 'ratings' },
  { path: '/seller', component: seller, name: 'seller' }
];
// 创建路由实例
const router = new VueRouter({
  routes: routes
})
// 关键在这里,设置afterEach钩子函数
router.afterEach((to, from, next) => {
  document.title = to.name;
})

标签: none

添加新评论