路由跳转

方式一：path路径跳转。
传值可以使用params 传值和query传值
(缺点:不能传引用数据类型-数组，对象等)

//写法1
<router-link to="/artlist">小说列表</router-link> 
//router-link解析出来其实是a标签

//写法2
<router-link :to="path1">小说列表</router-link> 

...

data() {
	return{
		path1:'/artlist'
	}
}

//写法3
<router-link :to="'/artlist'">小说列表</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

路由传值

1. query查询参数传值
   1.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由path字段负责, 传递的值由query字段负责
   1.2 query方式传递的值会以键值对的形式拼接到网址的后面, 与get请求传递数据的格式类似
   1.3 query方式传递的值, 刷新页面, 值不会消失
   1.4 query方式传值, 不需要去配置routes数组里的对应对象

2. params路径参数传值
   2.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由name字段负责, 传递的值由params字段负责
   2.2 params方式传递的值会以路径的形式拼接到网址的后面
   2.3 params方式传递的值, 刷新页面, 值会丢失
   2.4 params方式传值, 需要去配置routes数组里的对应对象, 需要给对象多加一个name字段, 还需要将path字段修改成 “/路由/:值1/:值2/:…”

//传值
methods:{
      goMyOrder(){
             this.$router.push({name:"order", params:{orderId:"667788"}}).catch(err=>{});
      }
}

//接收值
computed:{
     getOrderId(){
         return this.$route.params.orderId
     }
}

//路由配置
 { path:"order/:orderId",
   name:"order", 
   component: ()=>import("../views/Mine/MyOrder") 
 }

注意:

当进行路由重定向时， 也可以进行路由传值的， 如果需要传值， 将redirect的由字符串改成对象,例如：

        { path:" ", redirect: {path:"info", query:{userId:'112233'}} },
        { path:"info", component: ()=>import("../views/Mine/MyInfo") }