vue3 让应用窗口根据页面模块名称或商品名称变化

1、效果

根据不同的窗口tab动态显示不同的title

2、代码实现 

在路由词典配置里面

// 配置路由的时候，在meta属性里面设置title
{
    path: '/home',
    name: 'home',
    meta: { title: '首页' },
    component: () => import('@/views/Home/index.vue'),
  },
  {
    path: '/login',
    name: 'login',
    meta: { title: '登录' },
    component: () => import('@/views/Login/index.vue'),
  },
  {
    path: '/search',
    name: 'search',
    meta: { title: '搜索' },
    component: () => import('@/views/Search/index.vue'),
  },
  {
    path: '/detail',
    name: 'detail',
    meta: { title: '商品详情' },
    component: () => import('@/views/Detail/index.vue'),
  },
  {
    path: '/cart',
    name: 'cart',
    meta: { title: '购物车' },
    component: () => import('@/views/Cart/index.vue'),
  },

然后在路由器前置守卫这里

// 根据不同的url显示不同的网页标题
if (to.path === '/collect') {
    document.title =
      to.query.flag === 'collect' ? '收藏' : '订单'
  } else if (to.path === '/detail') {
    // 在加载页面的时候动态赋值
    // document.title = res
  } else {
    document.title = to.meta.title as string
  }

可以根据to里面的属性进行一些操作，根据不同的额判断条件可以通过documnet.title = 'xxx'设置不同的网页标题

路由前置守卫的一些属性解释

• to: 要去哪个页面
• from:从哪里来
• next:它是一个函数。
• 如果直接放行 next()
• 如果要跳到其它页 next(其它页)

router.beforeEach((to, from, next) => {
  next()
})