vue-router编程式导航 跳转和传参的基本使用

query传参

<button @click='A'>跳转</button>
<router-view></router-view>

const routes2 = [
  // 定义规则数组
  {
    path: '/A',
    name: 'aaa',
    component: A
  }
]

方法1：用path进行跳转 同时传递query参数

A(){
    this.$router.push({
    path:'/A',
    query:{a:'hello'}
    })
}

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

输出：
hello

方法2：用name进行跳转 同时传递query参数

A(){
    this.$router.push({
    name:'aaa',
    query:{a:'hello'}
    })
}

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

输出：
hello

params传参

<button @click='B'>跳转</button>
<router-view></router-view>

const routes2 = [
  // 定义规则数组
  {
    path: '/B',
    name: 'bb',
    component: B
  }
]

使用name跳转，并传递params参数

B(){
    this.$router.push({
    name:'bb',
    params:{b:'world'}
    })
}

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

输出：
world

总结：若要传query参数，使用path或者name都可传递，

但是若要传params参数，则只能使用name跳转。

若要同时传递query参数和params参数只能选择name跳转。

同时，使用path跳转时会把参数暴露在浏览器的url地址上，

但若使用name跳转则只会显示规则数组设置好的path地址。