1.全局前置路由和后置路由

2.獨享路由守衛(wèi)

3.組件內(nèi)路由守衛(wèi)

4.路由器的兩種工作模式

路由

作用：對路由進行權限控制

分類：全局守衛(wèi)，獨享守衛(wèi)，組件內(nèi)守衛(wèi)

一.全局前置路由和后置路由

① 前置路由守衛(wèi)：每次路由切換之前被調(diào)用或者初始化的時候被調(diào)用

?next() : 繼續(xù)執(zhí)行

router.beforeEach((to, from, next) => {
  console.log('前置路由守衛(wèi)', to, from, next)
  if (to.meta.isAuth) {
    if (localStorage.getItem('school') === 'atguigu') {
      next()
    } else {
      alert('學校名錯誤')
    }
  } else {
    next()
  }
})

meta是路由元信息，是路由器提供給我們放數(shù)據(jù)的一個容器

?② 后置路由守衛(wèi): 每次路由切換之后被調(diào)用或者初始化的時候被調(diào)用

router.afterEach((to, from) => {
  document.title = to.meta.title || "硅谷系統(tǒng)"
  console.log('后置路由守衛(wèi)', to, from)
})

?代碼匯總

// 該文件專門用于創(chuàng)建整個應用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
const router = new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About,
      meta: { title: '關于' }
      // 是否授權
    },
    {
      name: 'zhuye',
      path: '/home',
      component: Home,
      meta: { title: '主頁' },
      children: [
        {
          // 不要加/
          name: 'xinwen',
          path: 'news',
          component: News,
          meta: { isAuth: true, title: '新聞' }
        },
        {
          // 不要加/
          name: 'xiaoxi',
          path: 'message',
          component: Message,
          meta: { isAuth: true, title: '消息' },
          children: [
            {
              name: 'xiangqing',
              path: 'detail', // 使用占位符聲明并接收
              component: Detail,
              meta: { isAuth: true, title: '詳情' },
              // 第一種寫法：值為對象，該對象中的所有key-value都會以props形式傳給Detail組件
              // 數(shù)據(jù)是寫死的
              // props: { a: 1, b: 'hello' }
              // 第二種寫法：值為bool值，如果bool值為真，就會把該路由組件收到的所有params參數(shù)，以props的形式
              // 傳給Detail組件
              // props: true

              // 第三種寫法，值為函數(shù)
              props ($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title
                }
              }
            }
          ]
        }
      ]
    }
  ]
})
// 全局前置路由守衛(wèi) --每次路由切換之前被調(diào)用或者初始化的時候被調(diào)用
router.beforeEach((to, from, next) => {
  console.log('前置路由守衛(wèi)', to, from, next)
  if (to.meta.isAuth) {
    if (localStorage.getItem('school') === 'atguigu') {
      next()
    } else {
      alert('學校名錯誤')
    }
  } else {
    next()
  }
})
// 全局后置路由守衛(wèi) --每次路由切換之后被調(diào)用或者初始化的時候被調(diào)用
router.afterEach((to, from) => {
  document.title = to.meta.title || "硅谷系統(tǒng)"
  console.log('后置路由守衛(wèi)', to, from)
})
export default router

二.獨享路由守衛(wèi)

獨享路由守衛(wèi)：某個路由獨享的，只有前置，沒有后置

?三. 組件內(nèi)路由守衛(wèi)

?分為進入守衛(wèi)和離開守衛(wèi)

進入守衛(wèi)：通過路由規(guī)則，進入該組件時被調(diào)用

離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用

export default {
  name: 'About',
  // 組件內(nèi)守衛(wèi)（進入守衛(wèi)） 通過路由規(guī)則，進入該組件時被調(diào)用
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter', to, from, next)
    if (to.meta.isAuth) {
      if (localStorage.getItem('school') === 'atguigu') {
        next()
      } else {
        alert('學校名錯誤')
      }
    } else {
      next()
    }
  },
  // 離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}

四.路由器的兩種工作模式

① 對于url來說，#及其后面的內(nèi)容就是hash值，hash值不會包含在HTTP請求中，hash值不會帶給服務器

②? 兩種工作模式

（1）history

• 地址干凈，美觀，路徑中沒有#
• 兼容性和hash模式相比較差
• 應用部署上線的時候需要后端人員支持，解決刷新頁面服務端404的問題

（2）hash：

• 路徑中有#，不美觀
• 若以后地址通過第三方手機app分享，若app校驗嚴格，地址會標記為不合法
• 兼容性比較好

③ 使用mode配置項進行配置

文章來源地址http://www.zghlxwxcb.cn/news/detail-633522.html

到了這里，關于Vue2 第二十節(jié) vue-router （四）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！