vue中页面(路由)跳转及传值的几种方式 router-link + query + params跳转的几种方式与传值

跳转的几种方式与传值

1、router-link

1.1 根据路由路径（无参数与有参数）

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

1.2 根据路由名称（无参数和有参数的区别）

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

使用路由与路径·的注意事项：

：to=“” 可以实现绑定动态的路由和参数注意：router-link中链接如果是‘/‘开始就是从根路由开始，如果开始不带‘/’，则从当前路由开始。使用params时是不能通过path跳转的由于动态路由也是传递params的（/page/123?id=123），所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。所以，使用params的时候，只能用name来指定页面。 router-link 的使用/功能

实现路由切换，就是小模块的路由切换，这个时候的router就相当于a标签

参考文案：blog.csdn.net/qq_44163269…

参考文案2（偏属性）：www.cnblogs.com/fqh123/p/11…

2、this.$router.push()

1.1 不带参数跳转

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

1.2 带参数跳转

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

如何接收参数呢？

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

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

注意：

params 和 query 传参的区别：

params传参时，参数不会出现在url路径上面，但是刷新页面时param里面的数据会消失 query传参时，参数出现在url路径上面，刷新页面时query里面的数据不变区别及传参接参全过程图示:

params传参和 query传参都是在什么时候使用？

params传参，路由路径后面需要写/：参数名/参数名，传过来的参数就保存在这里，不写参数名的时候，用户一刷新传过来的参数就没有了 query传参，就不需要在路由路径后面再写任何东西 params传参，参数保存在了路由路径后面提前写的对应参数名里。query传参，会自动在路由路径后面形成传的参数名及对应的值。可以这样说，params传的是值，而query是把参数名和值一起传过去了。因为它的路由路径后面没有参数名所以在传多个参数的时候，使用query比较好，如果使用params，还得在路由路径后面创建多个参数名其他：

传值的话不仅仅是通过这两种方式，还可以通过LocalStorage，SessionStorage，vux来进行数据传递需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用。 router-link 是在通过标签做跳转，而this.$router.push是在script里面做跳转代码：

// 通过标签 <router-link>
<router-link to = 'A'>跳转到A页面</router-link>
    

// 通过方法 this.$router.push()
// html
<span @click=“hChange（“id”）”><span>

// script
methods: {
    hChange (val) {
        this.$router.push ({ name: 'page', params: { id: val } })
    }
}