路由跳转三种方式

方式一：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