vue中页面(路由)跳转及传值的几种方式

跳转的几种方式与传值

1、router-link

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

<router-link to="/page">点击查看子页面</router-link>
<router-link :to="{path: '/page', query:{id: '001'}}">点击查看子页面</router-link>

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

  <router-link :to="{name: 'Page', query:{id: '110'}}">点击查看子页面</router-link> 
  <router-link :to="{name: 'Page', params:{id: '110'}}">点击查看子页面</router-link>         

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

1. :to="" 可以实现绑定动态的 路由 和 参数
2. 使用params时是不能通过path跳转的

2. this.$router.push(）

<button @click='change'>点击我跳转页面</button>
function change(){
 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
}

如何接受参数？

this.$route.query.id

his.$route.params.id

注意：
params 和 query 传参的区别：
1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变

题外话：传值的话不仅仅是通过这两种方式，还可以通过LocalStorage，SessionStorage，vux来进行数据传递。