一、动态路由
应用场景:从信息列表组件,点击详情操作,跳转至详情组件,显示该条信息。
个人实现思路:在列表页,获取该条数据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 的值的