vue-router路由动态传参携带id进入详情页的三种模式

最新推荐文章于 2025-03-13 09:33:26 发布

weixin_49203377

最新推荐文章于 2025-03-13 09:33:26 发布

阅读量7.9k

点赞数 7

分类专栏： vue-router 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_49203377/article/details/120722693

版权

2 篇文章

订阅专栏

本文详细介绍了Vue.js中编程式导航的三种方法，包括通过路径参数、命名路由参数和查询参数进行动态传参。在实际应用中，根据需求选择合适的方式，既可以避免参数暴露在URL中，也可以灵活地传递和获取详情页的ID。

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

在项目中，通过一个列表进入详情页，携带参数id渲染不同的详情页，动态传参使用编程式跳转
vue传参方法一
在router路由配置中

{
      path: '/article/:id',
      name: 'Article',
      component: Article,
 }

在列表页中点击事件

handleClick(id){
   this.$router.push(`/article/${id}`) ;
 }

在详情页中使用params获取

mounted() {
   console.log(this.$route.params.id);
}

特点:方法一中需要在path中添加/:id来对应 $router.push 中path携带的参数。会把详情id暴露在网址中
vue传参方法二
在router路由配置中

{
      path: '/article',
      name: 'Article',
      component: Article,
 }

在列表页中点击事件

handleClick(id){
   this.$router.push({
     name: 'Article',
     params: {
         id: id
     }
   })
 }

在详情页中使用params获取

mounted() {
   console.log(this.$route.params.id);
}

特点;这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。所以不会暴露在网址中,同时也不会变化网址,router.afterEach也没有办法调用

vue传参方法三
在router路由配置中

{
      path: '/article',
      name: 'Article',
      component: Article,
 }

在列表页中点击事件

handleClick(id){
   this.$router.push({
     path: '/article',
     query: {
        id: id
     }
   })
 }

在详情页中使用query获取

mounted() {
   console.log(this.$route.query.id);
}

特点:这种情况下 query传递的参数会在url后面拼接上 ?id=？,同样会暴漏详情id
开始提到了编程式跳转,这里还要在说一种编程式不携参的跳转方式$router.go();
这个就随意提一下，就是类似于history.go()的方法，括号里面填个1就是前进一级页面，-1就后退一级页面