跳转的几种方式与传值
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>
使用路由与路径的注意事项:
- :to="" 可以实现绑定动态的 路由 和 参数
- 使用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里面的数据不变