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

在项目中,通过一个列表进入详情页,携带参数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就后退一级页面。