Vue-router 路由参数

1、path  和 query 

下面的代码 router-link的to参数，是一个地址

<router-link to='home'>点击跳转到home</router-link>

 可以通过to参数传入一个对象

<router-link :to="{path:'/home',query:{a:1,b:2,c:3}}">点击跳转到home</router-link>

 

 query接收的是一个对象，内部的是配置的参数

2、name和params

<router-link :to="{name:'sport', params:{a:2,b:3,c:4}}" >点击跳转到sport</router-link>

如果使用了name和params组合，在index.js中就要进行相关的name配置

{
    path: '/sport',
    name: 'sport',
    component: Sport
}

点击跳转后，浏览器上没有相关参数，但是实际上，携带了相关的参数，我们可以监听$route的相关参数

监听$route的结果

 

name和path这两种跳转方式，其实就是模仿了get和post请求，两者各有优点，一个是name方式由于是post形式的跳转，所以刷新之后参数会丢失，但是保密性好；path方式刷新页面不会丢失参数，但是保密性差