在 Vue.js 中,路由传值有几种常见的方式,包括通过路径参数、查询参数和路由元数据等。每种方式都有其适用的场景和特点。
1. 路径参数(Path Parameters)
路径参数是 URL 路径的一部分,通常用于需要唯一标识资源的情况,比如用户 ID、文章 ID 等。
定义路由
在定义路由时,可以使用冒号 :
来表示路径参数:
const routes = [
{
path: '/user/:id',
component: User
}
];
访问路径参数
在组件中,可以通过 this.$route.params
来访问路径参数:
<template>
<div>
<p>User ID: {{ userId }}</p>
</div>
</template>
<script>
export default {
computed: {
userId() {
return this.$route.params.id;
}
}
};
</script>
示例
访问 URL /user/123
,this.$route.params.id
将返回 123
。
2. 查询参数(Query Parameters)
查询参数是 URL 中以 ?
开头的一部分,通常用于过滤、排序等非关键数据的传递。
定义路由
查询参数不需要在路由配置中显式定义:
const routes = [
{
path: '/search',
component: Search
}
];
传递查询参数
可以通过路由跳转时传递查询参数:
<template>
<div>
<button @click="search">Search</button>
</div>
</template>
<script>
export default {
methods: {
search() {
this.$router.push({ path: '/search', query: { q: 'vue' } });
}
}
};
</script>
访问查询参数
在组件中,可以通过 this.$route.query
来访问查询参数:
<template>
<div>
<p>Query: {{ query }}</p>
</div>
</template>
<script>
export default {
computed: {
query() {
return this.$route.query.q;
}
}
};
</script>
示例
访问 URL /search?q=vue
,this.$route.query.q
将返回 vue
。
3. 路由元数据(Route Meta)
路由元数据是与路由关联的自定义数据,可以在路由配置中定义,用于控制路由的行为,比如权限控制等。
定义路由
在路由配置中定义 meta
字段:
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
];
访问路由元数据
在组件中,可以通过 this.$route.meta
来访问元数据:
<template>
<div>
<p v-if="requiresAuth">This page requires authentication</p>
</div>
</template>
<script>
export default {
computed: {
requiresAuth() {
return this.$route.meta.requiresAuth;
}
}
};
</script>
示例
如果当前路由的 meta
中有 requiresAuth
字段,this.$route.meta.requiresAuth
将返回 true
。
4. 命名视图(Named Views)
命名视图允许在同一路由下同时显示多个视图,通常用于布局中需要多个不同组件同时展示的情况。
5. 路由导航守卫(Navigation Guards)
导航守卫可以在路由切换时进行一些逻辑处理,比如传递数据或检查权限。
定义导航守卫
可以在全局、单个路由或组件内定义导航守卫:
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
总结
- 路径参数:适用于唯一标识资源的情况。
- 查询参数:适用于非关键数据的传递,如过滤和排序。
- 路由元数据:适用于控制路由行为的自定义数据,如权限控制。
- 命名视图:适用于需要在同一路由下显示多个视图的情况。
- 导航守卫:适用于在路由切换时进行逻辑处理,如数据传递和权限检查。