辽宁省城乡住房和建设厅网站上海ktv最新通知
Vue.js 传递路由参数和查询参数
在 Vue.js 开发中，Vue Router 提供了灵活的方式来处理路由参数和查询参数，使得组件能够根据不同的路径或查询条件渲染相应的内容。
路由参数
路由参数（也称为路径参数）是 URL 路径的一部分，用于标识特定的资源或内容。在 Vue Router 中，可以通过在路由路径中使用冒号 : 定义动态路由参数。
定义动态路由
首先，在路由配置中定义带有参数的路径：
import Vue from 'vue';
import VueRouter from 'vue-router';
import User from './components/User.vue';Vue.use(VueRouter);const routes = [{ path: '/user/:id', component: User },
];const router = new VueRouter({routes,
});export default router;
在上述配置中，/user/:id 表示 id 是一个动态参数，可以匹配 /user/1、/user/2 等路径。
访问路由参数
在目标组件中，可以通过 this.$route.params 访问路由参数：
<template><div><h2>用户 ID: {{ userId }}</h2></div>
</template><script>
export default {computed: {userId() {return this.$route.params.id;},},
};
</script>
通过上述方式，组件可以根据路由参数渲染相应的内容。
查询参数
查询参数是 URL 中 ? 后面的键值对，用于传递额外的信息。在 Vue Router 中，查询参数不需要在路由配置中声明，可以直接在导航时传递。
传递查询参数
可以通过 router.push 方法传递查询参数：
this.$router.push({ path: '/search', query: { keyword: 'Vue' } });
上述代码会导航到 /search?keyword=Vue。
访问查询参数
在目标组件中，可以通过 this.$route.query 访问查询参数：
<template><div><h2>搜索关键词: {{ keyword }}</h2></div>
</template><script>
export default {computed: {keyword() {return this.$route.query.keyword;},},
};
</script>
通过上述方式，组件可以根据查询参数执行相应的逻辑。
总结
-
路由参数：作为 URL 路径的一部分，需要在路由配置中定义，访问时使用
this.$route.params。 -
查询参数：作为 URL 中
?后的键值对，无需在路由配置中定义，访问时使用this.$route.query。
合理使用路由参数和查询参数，可以使 Vue.js 应用的路由设计更加灵活和强大。