方式一:router-link=to"跳转路径" path路径跳转
传值可以使用params 传值和query传值
(缺点:不能传引用数据类型-数组,对象等)
//写法1
<router-link to="/artlist">小说列表</router-link>
//router-link解析出来其实是a标签
//写法2
<router-link :to="path1">小说列表</router-link>
...
data() {
return{
path1:'/artlist'
}
}
方式二:命名式路由跳转(name)
传值可以使用params和query传值
(优点:可以传基本数据类型和数组,对象)
<router-link :to="{name:'shop',query:{city:cityObj}}">购物车</router-link>
...
//路由配置
{
path:'/shop',
//该path路径不能少。因为命名式路由跳转是通过name找到该path
name:'shop',
component:Shop
}
方式三:编程式路由跳转(最常用的,不受时机、条件的限制)
传值可以用params 传值和query传值
(优点:可以传基本数据类型和数组,对象)
jumpHome() {
this.$router.push({
path:"/home",
query:{
id:this.id
}
})
}
...
//接收值如果进入另一个页面,一般在created中接收
this.$route.query.id
//路由配置
{ path: "/home", component: ()=>import("../Home") }
//或者name和params搭配,接收值 this.$route.params.id