vue路由的编程式导航

#vue路由的编程式导航

跳转方法	传参位置	路由规则	接收
this.$router.push('/path')	无参数	无特殊	不需要接收
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

• 编程式导航官方文档：router.vuejs.org/zh/guide/es…
• 编程式导航介绍
  • 1.作用 ： 使用js代码是做路由跳转 (替代router-link)
  • 2.语法 ：
    • $router.push('/路径')
    • $router.push({name:'组件name'})
  • 3.应用场景：如果希望满足条件才跳转，就可以使用编程式导航
    • router-link ：相当于a标签，只要点击就会跳转,没有逻辑
    • $router.push('路径'):相当于window.location.href,使用js来做业务逻辑

query传参两个步骤

• 1.跳转传参

this.$router.push({ path: '/路由地址', query: { 参数名: '参数值' }})

• 2.跳转后的组件接收参数: this.$route.query.参数名

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

params传参三个步骤

有一个细节千万不要搞混淆，在编程式导航的时候。 如果你要是用query传参， 那么就要使用 path 来跳转 如果你要是用params传参， 那么就要使用 name 来跳转

• 1.路由规则添加路由名

{ path: '/friend', name: 'friend', component: friend },

• 2.跳转传参

this.$router.push({ name: '路由名', params: { 参数名: '参数值' }})

• 3.跳转后的组件接收参数: this.$route.params.参数名

<li>这是当前页面 params 接收到的参数: 
    <span>姓名：{{ $route.params.name }}</span> -- 
    <span>年龄：{{ $route.params.age }}</span>  
</li>