我们知道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
},
]
})
实现页面跳转和传递参数的方式有很多种：
方法一：
模板中可以使用标签进行跳转，跳转路径为：8080/t?index=id，如下：
您只需点击按钮即可实现跳转。 不需要写js代码。 如果需要传递参数html页面传值，只需要/t?index=1即可。 这样就可以通过window.location.href url获取重定向页面的参数，然后拦截参数。也可以通过以下代码获取参数
this.$route.query.index方法二：
跳转路径为：8080/t?index=id
需要注意的是，这里的to上面必须加引号，并且path的值必须和之前路由中定义的值一致。 Query是用来传递参数的，里面有一个参数字典。
接收参数：
this.$route.query.index方法三：
命名路由的形式：
跳转路径为：8080/t?index=id
注意，这里的name也必须和router/index.js中声明的name值一致，并且params用于参数传递html页面传值，params与name配对，query与path配对。
接收参数：
this.$route.params.index方法四：
跳转路径为：8080/t/id
此时，路由也需要采用如下形式：
routes: [
{
path: '/t/:index',
name: 'Test',
component: Test,
hidden:true
},
]接收参数：
this.$route.params.index方法五：
以上四种方法都是用html实现的跳转，还有一种对应的用js实现的跳转传参的方式。 代码如下：
export default{
methods:{
func (){
this.$router.push({path: '/t?index=1'});
}
}
}
接收参数依然使用
this.$route.query.index方法六：
export default{
methods:{
func (){
this.$router.push({path: '/t',query:{ index:'1'}});
}
}
}
接收参数依然使用
this.$route.query.index方法七：
export default{
methods:{
func (){
this.$router.push({path: '/t/index'});
}
}
}
接收参数依然使用
this.$route.query.index方法八：
export default{
methods:{
func (){
this.$router.push({name: 'Test',params:{ index:'1'}});
}
}
}
接收参数依然使用
this.$route.params.index感谢博主：
