vue路由带参跳转至新页面的三种方式

*杨丫丫*

已于 2022-03-01 16:20:39 修改

阅读量9k

点赞数 10

分类专栏： vue 文章标签： vue.js 前端

于 2021-08-17 16:53:15 首次发布

本文链接：https://blog.csdn.net/yangfan_357/article/details/119759885

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Vue中通过路径(path)和名称(name)匹配路由，并使用query和缓存传递参数的三种方式，详细阐述了如何在新页面中获取传递的参数值，包括在URL后面显示参数和通过缓存存储参数的方法。内容适用于前端开发者，特别是使用Vue.js进行项目开发的人群。

摘要由CSDN通过智能技术生成

vue路由带参跳转至新页面的三种方式：

方式一：
使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会以?id=XXX的形式显示在url后面

goToPage(id) {
	let routeData = this.$router.resolve({ 
		path: "/projectrecommendation",
	    query: { 
	    	id:id
	     }
	});
	
	//必要操作，否则不会打开新页面
	window.open(routeData.href, '_blank');    
}

需要配置对应的路由如下：

{
     path: '/projectrecommendation',
     name: 'projectrecommendation',
     component: projectrecommendation
}

在子页面中可以使用以下方式获取传递的参数值：

this.$route.query.id

方式二：
使用name来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会以?id=XXX的形式显示在url后面

goToPage(id) {
	let routeData = this.$router.resolve({ 
		name: "projectrecommendation",
	    query: { 
	    	id:id
	     }
	});
	
	//必要操作，否则不会打开新页面
	window.open(routeData.href, '_blank');    
}

需要配置对应的路由如下：

{
     path: '/projectrecommendation',
     name: 'projectrecommendation',
     component: projectrecommendation
}

在子页面中可以使用以下方式获取传递的参数值：

this.$route.query.id

方式三：
通过路由属性中的name来确定匹配的路由，通过缓存来传递参数

goToPage(id) {
	let routeData = this.$router.resolve({ 
     	name: "projectrecommendation"
    });

	//因为在子页面内使用this.$route.params拿到的对象为{}，参数无法传过来，所以需要将参数记录到缓存中，在新页面中 通过缓存来拿
	localStorage.setItem("geoId", id)；  

	//必要操作，否则不会打开新页面
	window.open(routeData.href, '_blank');    
}

需要配置对应的路由如下：

{
     path: '/projectrecommendation',
     name: 'projectrecommendation',
     component: projectrecommendation
}

在子页面中可以使用以下方式获取传递的参数值：

if (localStorage.getItem('geoId')){
	//从缓存中读取参数
    let  keywords= localStorage.getItem('geoId') || ""; 
	//读取参数后，删除
    localStorage.removeItem('geoId');
 };

注意：
（1）因为在子页面内使用this.$route.params拿到的对象为{}，参数无法传过来，所以需要将参数记录到缓存中，在新页面中通过缓存来拿

如有漏洞，欢迎互动指教！！！！！！！！！！！！！