this.$router.push路由跳转页面传参

vue-cli项目中this.$router.push传参的各种方式和接受参数

1、必须在router/index.js中配置

// An highlighted block
Vue.use(Router)
export default new Router({
routes: [
    {
      path: '/',
      component: Index,
      name: 'index',
      redirect: '/home',
      children: [
        {path: 'home', component: Home},
        {path: 'goods', component: GoodS},
        {path: 'goodsDetails', name: 'goodsDetails', component: goodsDetails},
        {path: 'thanks', name: 'thanks', component: Thanks},
        {path: '/refreshgoods', name: 'refreshgoods', component: RefreshGoods}
      ]
    },]

这里有三个参数，后面跳转需要用到：

1、path：跳转路径

2、name：跳转的名字

3、component：组件名字

2、跳转

1. query传参

//	query传参
//  传值
this.$router.push({ name: 'orderList', query: { conlltion: id }})
this.$router.push({path:'/orderList',query: {conlltion: id }})
// html取值 
$route.query.conlltion
// script取值 
this.$route.query.conlltion

2. params传参

//	params传参 
//  传值
this.$router.push({ name: 'orderList', params: { conlltion: id }})	// 只能用 name
// html 取值  
$route.params.conlltion
// script 取值  
this.$route.params.conlltion

区别

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。

扩展

1.需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用。
2.由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。只能用name来指定页面。
3.不带参数，直接跳转页面

this.$router.push('/orderList')
this.$router.push({name:'orderList'})
this.$router.push({path:'/orderList'})