vue - 路由带参跳转

梁庄十年 2023-09-22 原文

vue路由传参按照传参方式可划分为params传参和query传参； params传参分为在url中显示和影藏参数两种方式

1 params传参（url地址栏显示参数）

1.1 声明式 router-link

通过router-link的to属性实现，该方法的参数可以是一个字符串；使用该方式时，需要子路由中提前配置好参数，如：

// 1 路由配置
   {
     path: 'content/:id',
     name: 'Content',
     component: Content,
   },
// 2 页面跳转
 <router-link :to="'content/123'">进入</router-link>
// 3 获取方式
this.$route.params.id // 输出123

1.2 编程式 this.$router.push

使用该方式传参时，需要在路由中提前配置好参数，如：

// 1 路由配置
   {
     path: 'content/:id',
     name: 'Content',
     component: Content,
   },
// 2  页面触发js事件
 linkTo() {
    // 此处参数456可以通过动态变量替换
      this.$router.push('content/456') ;
   // 或
     this.$router.push({path: 'content/456'}) ;
 },
// 3 参数获取方式
this.$route.params.id // 输出456

url地址栏展示:

params传参url展示参数.png

2 params传参(url地址栏不显示参数)

params(不显示传参)也可以分为声明式和编程式两种,与方式一不同的是通过name进行传参,实现跳转;

2.1 声明式router-link

通过router-link组件的to属性实现

  // 1 路由配置
   {
       path: 'content',
       name: 'Content',
       component: Content,
    },
 // 2 页面跳转
<router-link :to="{name: 'Content', params: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.params.id // 输出123

2.2 编程式this.$router.push

使用该方式传值时,需要在路由中提前配置好参数,不过不需要在使用":/id"等类似方式传递参数,具体如下:

    // 1 路由配置
     {
       path: 'content',
       name: 'Content',
       component: Content,
      }
    // 2 js实现路由跳转
     this.$router.push({
        name: 'Content',
        params: {
          id: 123
        }
      })
// 3 参数获取
this.$route.params.id // 显示undefined

注意: 上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;

3 query传参(显示参数)

query传参(显示参数)也可分为声明式和编程式两种方式

3.1 声明式 router-link

通过router-link组件的to属性实现,不过该方式传值的时候,需要子路由提前配置好路由别名(name属性),如

 // 1 路由配置
    {
       path: 'content',
       name: 'Content',
       component: Content,
     }
// 2 页面设置
 <router-link :to="{name: 'Content', query: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.query.id // 输出 123

3.2 编程式 this.$router.push

使用该方式传值的时候,需要路由提前配置好路由别名(name属性), 如:

   // 1 路由配置
    {
       path: 'content',
       name: 'Content',
       component: Content,
     }
  // 2 js跳转
      this.$router.push({
        name: 'Content',
        query: {
          id: 123
        }
      })
// 3 参数获取
this.$route.query.id  // 输出123