vue踩坑笔记03---路由的作用,页面跳转
无参数跳转:
使用路由标签跳转:
通过路由路径跳转:
<router-link :to="{path:'/fruit/apple'}">apple</router-link>
此时的path就是注册路由时的path,也就是路由的路径。
可以简写为。
<router-link to="/fruit/apple">apple</router-link>
通过路由名称跳转:
<router-link :to="{name:'apple'}">apple</router-link>
此时的name就是注册路由时的name,也就是路由的名称。
用路由跳转的方式会给要跳转的元素加上a标签,可以通过tag属性,自定义跳转元素的标签。
<router-link tag="button" :to="{path:'/fruit/apple'}">apple</router-link>
此时跳转元素为button
<router-link tag="span" :to="{name:'apple'}">apple</router-link>
此时跳转元素为span
使用使用methods跳转:
<button @click="fn">apple</button>
methods: {
fn: function () {
this.$router.push({ path: 'fruit/apple' })
this.$router.push({ name: 'apple' })
}
}
有参数跳转:
使用路由标签跳转:
<router-link :to="{path:'/fruit/apple',query:{msg:this.msg}}">apple</router-link>
<router-link :to="{name:'apple',params:{msg:this.msg}}">apple</router-link>
其中query和params为传递的参数。
使用使用methods跳转:
<button @click="fn">apple</button>
methods: {
fn: function () {
this.$router.push({ path: 'fruit/apple', query: { msg: this.msg } })
this.$router.push({ name: 'apple', params: { msg: this.msg } })
}
}
子页面接收父页面参数:
data () {
return {
// query接收参数
aaa: this.$route.query.msg,
// params接收参数
bbb: this.$route.params.msg
}
}
注意,注意,注意,我可说了三遍了。
跳转的时候用的是this.$ router,接收的时候用的是this.$ route
query传参和params传参的区别:
- query传参配置的是path,而params传参配置的是name
query传参后的页面地址:参数会显示在地址栏(相当于get)
http://localhost:8082/#/fruit/apple?msg=Welcome%20to%20Your%20Vue.js%20App
params传参后的页面地址:参数不会显示在地址栏(相当于post)
http://localhost:8082/#/fruit/apple
- params传参刷新会无效,但是query会保存传递过来的值,刷新不变
那么问题来了,如果我又想让传的值不显示在地址栏,又想让传的值刷新页面后不消失,该怎么办呢?
先留个坑,以后填
个人学习总结,欢迎批评指正