Vue配置瀏覽器頭部圖標和title

Vue設置頁面標題title

• router下index.js文件設置頭信息

  export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
          title: '登錄頁面'
        }
      },
      {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
          title: '首頁'
        },
        children: [
            {
            name: 'users',
            path: 'users',
            component: Users,
            meta: {
              title: '用戶管理'
            },
            ...
        ]
      }
    ]
  })
  

• 在main.js配置

  import router from './router'
  router.beforeEach((to, from, next) => {
    /* 路由發生變化修改頁面title */
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next()
  })
  

Vue配置瀏覽器頭部小圖標

• 在index.html引入：

  <link rel="icon" href="static/fav.png" type="image/x-icon">
  

• static/fav.png為圖片路徑。