一、動態路由 應用場景：從資訊列表元件，點選詳情操作，跳轉至詳情元件，顯示該條資訊。

個人實現思路：在列表頁，獲取該條資料id,將該id傳至詳情元件，在詳情元件中傳id引數，通過詳情介面獲取詳情資訊 知識點： 1、jQuery專案中，跨頁面傳參的實現 1.1通過url傳參

function getUrlParam(key) {
    // 獲取引數
    var url = window.location.search;
    // 正則篩選位址列
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    // 匹配目標引數
    var result = url.substr(1).match(reg);
    //返回引數值
    return result ? decodeURIComponent(result[2]) : cityCode;
}
 

1.2、通過本地儲存傳參

2.vue專案中則使用動態路由傳參

const router = new VueRouter({
  routes: [
    // 動態路徑引數 以冒號開頭
    	{
		    path: 'pppadd/:id',
		    name: 'pppadd',
			component: Pppadd,
		}
  ]
})

2.1列表元件傳值

this.$router.push({
	name: 'pppadd',
	params: {
		id: this.checkid
	}
})

2.1.2 query方式傳值,url查詢引數

<router-link tag="a" :to="{path:'pppadd',query:{ppId:id}}">{{item.title}}</router-link>
 

2.2 詳情元件取值

let id = this.$route.params.id

2.2.2 query取值

let id = this.$route.query.ppId

二、導航守衛 應用場景：後臺管理系統的許可權驗證

個人實現思路：登入元件中，將使用者名稱、密碼等項，傳至後臺介面，如何後臺返回值為登入成功，則將狀態或者相關的資訊存入至cookie中，在路由檔案中做導航守衛

js-cookie

npm i js-cookie --save

在router.js中使用

import cookies from 'js-cookie'

const router = new Router({
  mode: 'history',
  base: '/tt/',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: resolve => require(['@/components/login'], resolve)
    },
    {
      path: '/choseSystem',
      name: 'ChoseSystem',
      component: resolve => require(['@/components/choseSystem'], resolve)
    },
    {
      path: '/home',
      name: 'Home',
      component: resolve => require(['@/components/home'], resolve),
      redirect: {
        name: 'messageReport'
      },
      meta: {
        isLogin: true
      },
      children: [
        {
          path: 'messageReport/:id',
          name: 'messageReport',
          component: resolve => require(['@/components/One/messageReort/index.vue'], resolve)
        },
        {
          path: 'messageReceive',
          name: 'messageReceive',
          component: resolve => require(['@/components/One/messageReceive/index.vue'], resolve)
        },
        // 值守通訊
        {
          path: 'speech',
          name: 'speech',
          component: resolve => require(['@/components/communicate/index'], resolve)
        },
        {
          path: 'shortmessage',
          name: 'shortmessage',
          component: resolve => require(['@/components/communicate/index'], resolve)
        },
        // 辦內稽核
        {
          path: 'check',
          name: 'checkReport',
          component: resolve => require(['@/components/check/index'], resolve)
        }
      ]
    }
  ]
 

router.beforeEach((to, from, next) => {
  if (to.matched.some(item => item.meta.isLogin)) {
    const shiroCookie = cookies.get('pushHome')
    if (shiroCookie) {
      next()
    } else {
      next({
        name: 'Login'
      })
    }
  } else {
    next()
  }
})

踩坑記：

1、在程式碼沒毛病的情況下，為什麼獲取不到後臺存入cookie的值？

當後臺存入cookie值時，在設定了 http-only的情況下，前端是無法讀取cookie 的值的