一、路由传参问题
说到搞Vue开发，怎么能少得了路由传参？咱们就靠这个玩意儿在页面之间飞来飞去传递各种信息。举个例子，比如要从list页转到detail页，还得把相关项目信息送给后者了。在Vue里，咱们可以用params或者query这两招搞定路由传参。
使用params传参：
params是个好东西，咱们能把数据拼接成动态地址的样子传过去——这种需求往往出现在URL里面。比如说要去详情页的话，就可以把项目ID塞进去了。其实就是这么简单，瞧我给你写段代码看看：
javascript
咱们就用Vue Router这个新玩意儿建个路，这样我们的站点就能更容易地导航~
routes:[
{
path:'/detail/:id',
component: Detail,
props: true
// 路由配置
const router = new VueRouter({
routes: [
{
path: '/detail/:id',
component: Detail
}
]
})
// 列表页
-
{{ item.name }}
export default {
data() {
return {
itemList: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' },
]
}
}
}
// 详情页
{{ project.name }}
{{ project.description }}
export default {
data() {
return {
project: {}
}
},
mounted() {
// 获取params参数
const id = this.$route.params.id;
// 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
this.project = this.itemList.find(item => item.id === Number(id));
}
}
}
]
});
在这些代码里头，咱们用`:id`的动态路径接收到参数，然后把它传到目标组件那儿，就靠那个`props: true`搞定了。
使用query传参：
Query呢就是把各种参数当成”东西”，然后通过 URL 传过去；如果参数比较多或者复杂，用 Query 就更方便。比如说，当你要在搜索框里按照不同条件来筛选结果，只需要把这些条件写成 query 的参数就能搞定了。例子，就是这么个样子的：
直接在这个路由里设置个新的路径和查询参数你看这样：’/search?keyword=vue&category=frontend’。
// 路由配置
const router = new VueRouter({
routes: [
{
path: '/detail',
component: Detail
}
]
})
// 列表页
-
{{ item.name }}
export default {
data() {
return {
itemList: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' },
]
}
}
}
// 详情页
{{ project.name }}
{{ project.description }}
export default {
data() {
return {
project: {}
}
},
mounted() {
// 获取query参数
const id = this.$route.query.id;
// 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
this.project = this.itemList.find(item => item.id === Number(id));
}
}
这样一来，当你跳转至搜索页时，就能顺便把关键词和分类打包成query参数送过去。
二、路由守卫问题
在Vue搞项目时，不只是设置路由来传递参数这么简单，还有一个很重要的知识点——路由守卫。这个功能可以让咱们在跳转前后做点儿什么事儿，比如检查权限处理数据啊等等。
全局前置守卫：
所谓“全局前置守卫”，就是要在每个路由跳转之前做点啥事儿。这个功能对咱们验证用户权限呀、跟踪用户行为这类场景可是很实用的！给大家看看例子：
路由在每个流程之前都要检查一下，等于是先瞄两眼，看看这个过程到底要进行到哪里去。咱就把“路由”改成了“流程”，这样听起来是不是更有感觉？
//验证用户是否登录
如果得认证，而又没登录的话，就直接转向登录的页面！
next(‘/login’);
} else {
next();
// 路由守卫配置
router.beforeEach((to, from, next) => {
// 判断用户是否处于登录状态
const isLogged = checkLogin();
if (to.meta.authRequired && !isLogged) {
// 需要登录才能访问的页面
next('/login');
} else {
next();
}
});
}
这里的代码，用那个’beforeEach’方法搞定了一个全局的’守门员’角色，它负责赶紧查验下咱们的登录情况！
全局后置守卫：
全局后置守卫，就是在路由跳转之后做点事情呗，比如记录你的行为，计算网页浏览次数啥的。来看个例子吧：
在每一次航班结束后，我们都会做这个小程序。
//统计页面浏览量
logPageView(to.path);
我们可以利用’afterEach’这个函数进行全局后置处理，这样就能实时记录每次导航到新页面的浏览量。
// 路由守卫配置
router.afterEach((to, from) => {
// 统计页面浏览量
recordPageView();
});
组件内的守卫：
除开全局守卫，Vue还有个组件内守卫功能，能让咱们特殊照顾某个组件，比如把组件里的数据在要消失之前存起来或者查证下表单是不是有问题之类。看下面这个简单的实例就明白啦：
export default {
离开界面时，bugcheck(from，to，next)会检查代码
//在组件离开前保存数据
saveFormData();
}
在组件要退场时，用`beforeRouteLeave`搞定数据存盘工作。
总的说来，学会了Vue框架前端开发就得懂得路由参数传输和路由守护，这俩东西让我们开发起来更顺手！用params和query传输数据很方便的，再加上全局前后置守卫和组件中的守卫机制，就能保证路由操作稳稳当当又灵活。希望我说的这些能帮到你哈~
// 组件内的守卫配置
export default {
beforeRouteLeave(to, from, next) {
if (this.isDirty) {
// 提示用户保存未保存的数据
const confirmed = window.confirm('是否保存未提交的数据？');
if (confirmed) {
// 保存数据
this.saveData();
}
}
next();
}
}
。
原文链接：https://www.icz.com/technicalinformation/web/2024/04/13358.html，转载请注明出处~~~ 
评论0