vue-router声明式导航传值的基本使用

vue-router的传值类型有两种，一种是query，一种是params

query传值

const routes = [
  // 先定义规则数组,这个routes用于生成路由对象，与下面的route没关系
  {
    path: '/A',
    component: A
  }
]

<a href='#/A?x=123'>显示A</a>
<router-view></router-view>

接收方：
console.log(this.$route.query.x)

输出：
123

query传值格式为： 地址?属性名 = 值

只需要在链接跳转时在后面拼接上 ?属性名=值 即可完成传值

若要传多个query值的话，格式为： 地址?属性名1=值1&属性名2=值2

使用方式还是 this.$route.query.属性名

params传值

const routes = [
  // 先定义规则数组,这个routes用于生成路由对象，与下面的route没关系
  {
    path: '/B:x',
    component: B
  }
]

<a href='#/B/456'>显示B</a>
<router-view></router-view>

接收方：
console.log(this.$route.params.x)

输出：
456

params传值需要在定义规则数组的path属性上定义属性名,在跳转链接直接传值就行 格式为 地址/值

若要传多个值的话，

则需要在规则数组的path属性上更改，格式为： path:'/地址/:属性名1/:属性名2'

跳转链接也要进行更改，格式为： 地址/属性值1/属性值2

使用方式还是 this.$route.params.属性名

query+params传值

const routes = [
{
    path: '/C:x',
    component: C
  }
]

<a href='#/C/789?a=hello'>显示C</a>
<router-view></router-view>

接收方:
console.log(this.$route.query.a)
console.log(this.$route.params.x)

输出：
789
hello

当query和params一起用的时候query的传值方式只能在params后面。

即 地址/params值?query属性名=query属性值

其余并无其他变化。