路由跳转以及传参问题

页面导航的两种方式

1.声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的<a></a>链接或vue中的<router-link></router-link>

2.编程式导航：通过调用Javascript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的lication.href

1.先来说声明式导航：

跳转：

不传参的情况下，直接跳到页面

传参的情况：

①传参写法1: 借鉴原生的URL参数格式 利用 ? 传递参数

<router-link to="/products?num=45&类型=手机">产品页</router-link>

②传参写法2：简化前提是 需要到路由中进行参数配置

<router-link to="/products/45/手机">产品页</router-link>

产品页接参：

①？接参：

<h1>我是高达, 我会{{ $route.query.num }}</h1>

②/接参

<div>{{ $route.params.num}}, {{ $route.params.phone }}</div>

③利用属性解构接参：当路由中 开启 props 解构功能后

<div>{{ num }}, {{phone }}</div>

props: ['num', 'phone'],

2.说一下编程式导航

常用的编程式导航 API 如下：

this.$router.push('hash地址')

this.$router.go(n)

 具体实现