vue页面跳转（带参数，附：``$route``和``$router``及其配置的区别）✔

1.使用<router-link>标签

<!-- <router-link :to="{path: '/houQin/inventory' ,query: {id:this.list[0].id}}">  -->
<!-- <router-link :to="{name: 'inventory' ,query: {id:this.list[0].id}}">  -->
<router-link :to="{name: 'inventory' ,params: {id:this.list[0].id}}"> 
  <el-button type="text" icon="el-icon-arrow-left" ></el-button>
</router-link>

2.使用this.router.push()（推荐！）
html:

<el-button type="text" @click="toDetail(list)"></el-button>

js:

toDetail (list) {
  this.$router.push({
    // path-query组合--调用：this.$route.query.id
    // path: '/honQin/inventory',
    // name-query组合--调用：this.$route.query.id
    name: 'inventory',
    query: {id: list.id}
  })
}

toDetail (list) {
  this.$router.push({
    // name-params组合--调用: this.$route.params.id--不能用path
    name: 'inventory',
    params: {id: list.id}
  })
}

ps:
一、$router和$route的区别
$router: 是路由操作对象，只写对象
$route : 路由信息对象，只读对象（感觉“只读”不太正确，因为我可以对this.$route.query赋值）

//$router操作 路由跳转
this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })
//$route读取 路由参数接收
var name = this.$route.params.name;

二、路由跳转方式name 、 path 和传参方式params 、query的区别
path 和 Name路由跳转方式，都可以用query传参
path路由跳转方式,params传参会被忽略，只能用name命名的方式跳转

1. 页面调用：
   1. query–调用：this.$route.query.id
   2. params–调用: this.$route.params.id
2. 跳转方式
   1. query–类似ajax的get，在浏览器地址栏上显示参数–可以用path或name两种跳转
   2. params–类似ajax的post，在浏览器地址栏上不显示参数–只能用name跳转，使用path，接收参数页面会是undefined！

参考地址1
参考地址2
来自参考地址2的问题：待仔细研究
注意：params传参如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，要怎么解决？
解决：一、传参字符串name小的时候，可以在路由后面加参数名/router1/:name
二、name大的时候用sessionStorage；（欢迎补充）

注意：如果路由为动态路由{path: ‘/hello/:id’,name:‘hello’}
路由跳转执行this.$router.push({name: ‘hello’,params: obj});obj里面只要有id属性，就会自动带到URL里面