路由跳转的几种方式及传参

1. router-link：（实现跳转最简单的方法----通过标签做跳转）

        1.1 根据路由路径：

        <router-link to='需要跳转的页面的路径'>浏览器解析时，将他解析为一个类似于<a>的标签。

<router-link to = "/page">跳转到page页面</router-link>

        =》params类似于ajax中post，在浏览器地址中不显示参数；使用params时 是不能通过path跳转的，只能用name来指定页面。

<router-link :to = "{ name: 'page', params: { id: '110' } }">跳转到page页面</router-link>

        =》query类似于ajax中的get，在浏览器地址中显示参数。

<router-link ：to = "{ name: 'page', query: { id: '110' } }">跳转到page页面</router-link>

        1.2 根据路由名称：

<router-link ：to = "{ name: 'page'}">跳转到page页面</router-link>

        2. this.$router.push()：（在script里面做跳转）

        2.1 不带参数跳转：

// 不带参数，直接跳转页面
this.$router.push('/home')
this.$router.push({ path: '/home' })
this.$router.push({ name: 'home' })

        2.2 带参数跳转：

<button @click=‘hChange’>点击按钮跳转页面</button>
function hChange () {
    this.$router.push({ path: '/home', query: { id: '001' } })  
    // 根据路由路径 + query 的方式跳转传参
    this.$router.push({ name: 'home', query: { id: '001' } })   
    // 根据路由名称 + query 的方式跳转传参
    this.$router.push({ name: 'home', params: { id: '001' } })  
    // 根据路由名称 + params 的方式跳转传参
}

如何接收参数呢？

// 在html中接收参数
$route.query.id
$route.params.id

// 在script中接收参数
this.$route.query.id
this.$route.params.id