让我们先来一个表格简单的介绍一下

跳转方法	传参位置	路由规则	接收
	/path?key=value	无特殊	$route.query.key
	/path/值	/path/:key	$route.params.key
this.$router.push({path: "/path", query: {key: value}})	query的对象	无特殊	$route.query.key
this.$router.push({name: "com", params: {key: value})	params的对象	路由规则需要name属性	$route.params.key(注意,这种在内存中保存)

vue动态路由匹配（声明式导航）

vue路由的编程式导航

• 1.作用 ： 使用js代码是做路由跳转 (替代router-link)

• 2.语法 ：

  • $router.push('路径')
  • $router.push({name:'组件name'})

2.query语法

• 语法1：通过路径传参(刷新页面还在)，写在query中

​
this.$router.push({ path: '路由地址', query: { key: 'value' }})

对应路由接收this.$route.query.key 取值

语法2：通过params传参(内存传递，刷新页面就不在了)

​
this.$router.push({name: '路由name' , params: { key: 'value' }})

对应路由接收this.$route.params.key 取值