meta的使用和全局loadingbar day6

现在项目主要存在二个问题。
第一个问题:当我们点击不同item切换到不同页面时，title没有变化，如下图:

image.png

第二个问题:当我们切换页面时，没有进度条。
我们先解决第一个问题。

导航守卫

• 添加前置守卫和后置钩子

  
  
  image.png
  
  
  image.png
  
  

  添加之前修改一点东西:

  
  
  image.png
  
  
  image.png
  
  整体代码:
  index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
import userlist from '@/views/user/userlist'
import userstatistics from '@/views/user/userstatistics'
import login from '@/views/login/login'
import home from '@/views/home/home'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        title: '登录'
      }
    },
    {
      path: '/',
      name: 'Test01',
      component: Test01,
      meta: {
        title: '工作区域'
      },

      children: [
        {
          // path为空即默认页面 home.vue
          path: '',
          name: 'home',
          component: home,
          meta: {
            title: '首页'
          }
        },
        {
          path: 'userlist',
          name: 'userlist',
          component: userlist,
          meta: {
            title: '用户列表'
          }
        },
        {
          path: 'userstatistics',
          name: 'userstatistics',
          component: userstatistics,
          meta: {
            title: '用户统计'
          }
        },
        {
          path: 'home',
          name: 'home',
          component: home,
          meta: {
            title: '工作区域'
          }
        }
      ]
    }
  ]
})

export default router
router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.title) document.title = '[OA] - ' + to.meta.title
  next()
})
router.afterEach((to, from) => {
  // ...
})

meta里面的title就是对应的标题，效果如图:

image.png

我们接下来解决第三个问题，做一个进度条。
先引入包:import iView from 'iview'
然后加入代码:

export default router
router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  if (to.meta && to.meta.title) document.title = '[OA] - ' + to.meta.title
  next()
})
router.afterEach((to, from) => {
  iView.LoadingBar.finish()
})

效果如图:

image.png

在main.js添加以下代码可以改变进度条的颜色:

iView.LoadingBar.config({
  color:'#xxxxxx'
})