8、vue路由跳转 params与query 路由传参

params与query

router文件下index.js里面，是这么定义路由的：

{
    path: '/about',
    name: 'About',
    component: About
}

用query传参可以直接写在path路由地址里，也可写在json对象中

//query,用路径跳转

this.$router.push({
  	path:'/about',
  	query:{
  		name:'about',
  		code:111
  	}
})

接收参数

this.$route.query

是{name: "about", code: "111"}

用params传参需要直接写在json对象中，跳转地址为router中配置的name（此处是About），params中是传的数据

//params,用name跳转传参
this.$router.push({
	name:'About',
	params:{
		name:'about',
		code:111
	}
})

接收参数

this.$route.params.code;
是
{name: "about", code: "111"}

总结：

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候，已经是$route而不是$router

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

vue-router打开新页面

      const { href } = this.$router.resolve({
        path: '/about',
        query: {
          id: item.id
        }
      })
      window.open(href, '_blank')