Vue中的路由跳转及传参的多种方法小结

//写法1
<router-link to="/artlist">小说列表</router-link> 
//router-link解析出来其实是a标签
//路由配置
export default new VueRouter({
  routes: [
    {
      path: "/artlist",
      component: ArtList,
    }
  ]
});

//写法2
<router-link :to="path1">小说列表</router-link> 
//写法3
<router-link :to="'/artlist'">小说列表</router-link> 
...
data() {
	return{
		path1:'/artlist'
	}
}
//但是还需要进行路由配置
export default new VueRouter({
  routes: [
    {
      path: "/artlist",
      component: ArtList,
    }
  ]
});

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

<router-link :to="{name:'shop',query:{city:cityObj}}">购物车</router-link> 
...
//路由配置
{
	path:'/shop',
	//该path路径不能少。因为命名式路由跳转是通过name找到该path
	name:'shop',
	component:Shop
}

this.$router.push({ 
	name:"admin",　　　　
	//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) 
	params:{id:item.id} 
}) 
//这个组件对应的路由配置 
{　　
	//组件路径 
	path: '/admin',　　
	//组件别名 
	name: 'admin',　　
	//组件名 
	component: Admin, 
} 

this.$router.push({
	name:"/admin/${item.id}", 
}) 
//这个组件对应的路由配置 
{ 　　
	//组件路径 
	path: '/admin:id', 　　
	//组件别名 
	name: 'admin', 　　
	//组件名 
	component: Admin, 
}

this.$router.push({ 
	name:"/admin",　　　　 
	query:{id：item.id} 
}) 
//这个组件对应的路由配置 
{ 　　
	//组件路径 
	path: '/admin', 　　
	//组件别名 
	name: 'admin', 　　
	//组件名 
	component: Admin, 
}