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

最新推荐文章于 2023-01-09 17:34:17 发布

zcm629

最新推荐文章于 2023-01-09 17:34:17 发布

阅读量636

点赞数

分类专栏： Vue2+ 文章标签： vue vue动态路由 vue导航守卫 vue后台管理项目权限验证

本文链接：https://blog.youkuaiyun.com/weixin_43182021/article/details/84069284

版权

本文详细介绍了在Vue项目中动态路由的应用，包括通过query方式在列表组件和详情组件间传递参数，以及在组件复用时的注意事项。同时，文章探讨了导航守卫在后台管理权限验证中的作用，结合js-cookie库实现在登录成功后存储状态，并在路由守卫中进行检查。在实践中，作者遇到了http-only设置导致前端无法读取cookie的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

最低0.47元/天解锁文章