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 路由配置   {     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

使用该方式传值时,需要在路由中提前配置好参数,不过不需要在使用":/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

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

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

url地址栏展示:

query方式url展示.png