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命名的方式跳转
- 页面调用:
- query–调用:this.$route.query.id
- params–调用: this.$route.params.id
- 跳转方式
- query–类似ajax的get,在浏览器地址栏上显示参数–可以用path或name两种跳转
- 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里面