Vue——導航守衛

一、爲什麼使用導航守衛

在一個SPA應用中，網頁改變，他的標題也需要改變，網頁標題是通過

守衛包括：全局守衛、路由獨享守衛、組件內的守衛

二、如何修改

1、在index.js中寫 router.beforeEach（）函數，它需要我們給他一個箭頭函數，箭頭函數包含有to, from, next三個參數，前兩個參數可以直接從當前route中拿到，所以我們可以在index中加入如下代碼

// 全局導航守衛（實現頁面跳轉，標題隨之更改）
router.beforeEach((to, from, next) =>{
  // congfrofrom跳轉到to
  document.title = to.matched[0].meta.title
  next()
  // matched是匹配了當前的信息，取其中第一個元素必然是當前組件信息
  // 注意：一定要有next，不然無法回調下一步
})

並且要給每個路由添加包含title信息的meta元數據，如下

// index.js

// 配置路由相關信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懶加載
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

// 1.通過Vue.use（插件），安裝插件
Vue.use(VueRouter)

// 2.創建VueRouter對象
const  routes =[
  {
    // 重定向到首頁，打開網頁就是首頁
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首頁'
    },
    // 添加屬於Home 的子組件,子組件路由path前面不需要加 '/ '
    children: [
      {
        path: '',
        redirect: 'news',
        // 元數據
        // meta: {
        //   title: '新聞'
        // }
      },
      {
        path: 'news',
        component: HomeNews,
        meta: {
          title: '新聞'
        }
      },
      {
        path: 'message',
        component: HomeMessage,
        meta: {
          title: '消息'
        }
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '關於'
    }
  },
  {
    path: '/user/:abc',
    component: User,
    meta: {
      title: '用戶'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '檔案'
    }
  }
]
const  router = new VueRouter({
  // 配置路由和組件之間的應用關係
  routes,
  // 將url改成常見的history模式，不用帶'#'的哈希
  mode: 'history',
  linkActiveClass: 'active'
})

// 全局導航守衛（實現頁面跳轉，標題隨之更改）
// 此處是前置守衛
router.beforeEach((to, from, next) =>{
  // congfrofrom跳轉到to
  document.title = to.matched[0].meta.title
  next()
  // 注意：一定要有next，不然無法回調下一步
})

// 3.將router對象傳入到Vue實例
export default router

需要注意的是，導航守衛中的箭頭函數的next是和生命週期中的鉤子函數有關，只有執行了next才能進入下一個鉤子，不然就會阻斷，並且next可以進行判斷後跳轉到其他頁面，可用於登錄等操作，詳情見官網。