首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由跳转传参

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

2023-11-21 10:09:20 作者：宝子向前冲

这篇文章主要介绍了Vue中的路由跳转及传参的多种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

路由跳转的三种方法

1.path路径跳转

传值可以使用params传值和query传值 (缺点:不能传引用数据类型-数组，对象等)

//写法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,
    }
  ]
});

2.编程式路由 this.$router.push()

(最常用的，不受时机、条件的限制)。
传值可以用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

3.命名式路由跳转（name）

传值可以使用params和query传值
(优点:可以传基本数据类型和数组，对象)

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

路由传参的三种方法

一、params传参

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

通过params传递参数，如果我们想获取 id 的参数值，可以通过 this.$route.params.id 这种方式来打印出来就可以得到了；

注意：获取参数的时候是 $route，跳转和传参的时候是 $router

二、路由属性配置传参：

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

通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值，

注意： this. $router.push 方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；

以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式，参数都是不可见的，但是上面两种方法都有一个弊端，就是当页面刷新了是获取不到参数值的，那么有没有一种方法是页面刷新之后参数依然存在呢？

三、query传参

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

第三种方式是用 query 来传参，这种方式是可以解决页面刷新参数消失问题的，这种方式可以理解为是 ajax 中的 get 方法，参数是直接在 url 后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用此方法来解决；

区别

（1）params传参

只能用 name，不能用 path。
地址栏不显示参数名称 id，但是有参数的值。

（2）query传参

name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。
地址栏显示参数格式为?id=0&code=1

到此这篇关于Vue中的路由跳转及传参的多种方法的文章就介绍到这了,更多相关vue路由跳转传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！