vue跳转页面打开新窗口,并携带与接收参数方式

1、携带普通类型参数

字符串、数字等。

path:要跳转新页面的路由链接

query:要携带的参数

 	let pathInfo = this.$router.resolve({
 	     path:'/product_detail',
 	     query:{
 	     productId:'11'
 	     }
 	})
 	window.open(pathInfo.href, '_blank');

新页面的参数接收:

 	this.productId = this.$route.query.productId

2、携带复杂类型参数

对象、数组等,通过jsON转换进行传递。

 	let pathInfo = this.$router.resolve({
 	     path:'/product_detail',
 	     query:{
 	     data:{name:'张三'}
 	     }
 	})
 	window.open(pathInfo.href, '_blank');

新页面的参数接收:

 	console.log(this.$route.query.data)

vue页面跳转并传参的八种方式

我们知道,在vue中每个页面都需要在路由中声明,就是在router/index.js中写下面代码:

 	import Vue from 'vue'
 	import Router from 'vue-router'
 	import Test from "../components/Test";
 	Vue.use(Router)
 	export default new Router({
 	     mode: 'history',
 	     routes: [
 	     {
 	         path: '/t',
 	         name: 'Test',
 	         component: Test,
 	         hidden:true
 	     },
 	     ]
 	     })

实现页面跳转并传参有多种方式:

方法一

在template中可以使用<router-link>标签实现跳转,跳转的路径是http://localhost:8080/t index=id,如下:

 	&lt;router-link to="/t index=1">
 	     &lt;button class="btn btn-default">点击跳转&lt;/button>
 	&lt;/router-link>

只需要点击按钮就可以实现跳转,不需要写js代码,需要传递参数的话只需要/t index=1即可,这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数

 	this.$route.query.index

方法二

跳转的路径是http://localhost:8080/t index=id

 	&lt;router-link :to="{path:'/t',query: {index: 1}}">
 	     &lt;button class="btn btn-default">点击跳转&lt;/button>
 	&lt;/router-link>

其中需要注意,这里的to前面一定要加冒号,path的值要和上面路由定义的值一致,传参用query,里面是参数字典。

接收参数:

 	this.$route.query.index

方法三

命名路由的方式:

跳转的路径是http://localhost:8080/t index=id

 	&lt;router-link :to="{name:'Test',params: {index: 1}}">
 	     &lt;button class="btn btn-default">点击跳转&lt;/button>
 	&lt;/router-link>

注意这里的name也要和router/index.js中声明的name值一致,并且传参使用params,和name配对的是params,和path配对的是query。

接收参数:

 	this.$route.params.index

方法四

跳转的路径是http://localhost:8080/t/id

 	&lt;router-link:to="'/test/'+1">
 	     &lt;button class="btn btn-default">点击跳转&lt;/button>
 	&lt;/router-link>

这时的路由也需要更为为下面的形式:

 	routes: [
 	     {
 	         path: '/t/:index',
 	         name: 'Test',
 	         component: Test,
 	         hidden:true
 	     },
 	     ]

接收参数:

 	this.$route.params.index

方法五

上面四种方法都是在html中实现的跳转,还有另外对应的在js中实现的跳转并传参的方法,代码如下:

 	&lt;template>
 	&lt;button @click = "func()">跳转&lt;/button>
 	&lt;/template>
 	&lt;script>
 	     export default{
 	     methods:{
 	         func (){
 	         this.$router.push({path: '/t index=1'});
 	         }
 	     }
 	     }
 	&lt;/script>

接收参数依然使用

 	this.$route.query.index

方法六

 	&lt;template>
 	&lt;button @click = "func()">跳转&lt;/button>
 	&lt;/template>
 	&lt;script>
 	     export default{
 	     methods:{
 	         func (){
 	         this.$router.push({path: '/t',query:{ index:'1'}});
 	         }
 	     }
 	     }
 	&lt;/script>

接收参数依然使用

 	this.$route.query.index

方法七

 	&lt;template>
 	&lt;button @click = "func()">跳转&lt;/button>
 	&lt;/template>
 	&lt;script>
 	     export default{
 	     methods:{
 	         func (){
 	         this.$router.push({path: '/t/index'});
 	         }
 	     }
 	     }
 	&lt;/script>

接收参数依然使用

 	this.$route.query.index

方法八

 	&lt;template>
 	&lt;button @click = "func()">跳转&lt;/button>
 	&lt;/template>
 	&lt;script>
 	     export default{
 	     methods:{
 	         func (){
 	         this.$router.push({name: 'Test',params:{ index:'1'}});
 	         }
 	     }
 	     }
 	&lt;/script>

接收参数依然使用

 	this.$route.params.index

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

标签

发表评论