字符串、数字等。
path：要跳转新页面的路由链接
query：要携带的参数
let pathInfo = this.$router.resolve({ path:'/product_detail', query:{ productId:'11' } }) window.open(pathInfo.href, '_blank'); 新页面的参数接收：
this.productId = this.$route.query.productId
对象、数组等，通过JSON转换进行传递。
let pathInfo = this.$router.resolve({ path:'/product_detail', query:{ data:{name:'张三'} } }) window.open(pathInfo.href, '_blank'); 新页面的参数接收：
console.log(this.$route.query.data)
我们知道，在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，如下：
<router-link to="/t?index=1"> <button class="btn btn-default">点击跳转</button> </router-link>
只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要/t?index=1即可，这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数
this.$route.query.index
跳转的路径是http://localhost:8080/t?index=id
<router-link :to="{path:'/t',query: {index: 1}}"> <button class="btn btn-default">点击跳转</button> </router-link> 其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的值一致，传参用query，里面是参数字典。
接收参数：
this.$route.query.index
命名路由的方式：
跳转的路径是http://localhost:8080/t?index=id
<router-link :to="{name:'Test',params: {index: 1}}"> <button class="btn btn-default">点击跳转</button> </router-link> 注意这里的name也要和router/index.js中声明的name值一致，并且传参使用params，和name配对的是params，和path配对的是query。
接收参数：
this.$route.params.index
跳转的路径是http://localhost:8080/t/id
<router-link:to="'/test/'+1"> <button class="btn btn-default">点击跳转</button> </router-link>
这时的路由也需要更为为下面的形式：
routes: [ { path: '/t/:index', name: 'Test', component: Test, hidden:true }, ] 接收参数：
this.$route.params.index
上面四种方法都是在html中实现的跳转，还有另外对应的在js中实现的跳转并传参的方法，代码如下：
<template> <button @click = "func()">跳转</button> </template> <script> export default{ methods:{ func (){ this.$router.push({path: '/t?index=1'}); } } } </script> 接收参数依然使用
this.$route.query.index
<template> <button @click = "func()">跳转</button> </template> <script> export default{ methods:{ func (){ this.$router.push({path: '/t',query:{ index:'1'}}); } } } </script> 接收参数依然使用
this.$route.query.index
<template> <button @click = "func()">跳转</button> </template> <script> export default{ methods:{ func (){ this.$router.push({path: '/t/index'}); } } } </script> 接收参数依然使用
this.$route.query.index
<template> <button @click = "func()">跳转</button> </template> <script> export default{ methods:{ func (){ this.$router.push({name: 'Test',params:{ index:'1'}}); } } } </script> 接收参数依然使用
this.$route.params.index