vue知识点运用(动态路由、路由导航守卫）

一、动态路由
应用场景：从信息列表组件，点击详情操作，跳转至详情组件，显示该条信息。

个人实现思路：在列表页，获取该条数据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 的值的