vue路由跳转写法在html,vue路由跳转的多种方式

1.router-link to 跳转

跳转

2.this.$router.push("ComponentName") ,通过路由名称跳转

跳转

go(){this.$router.push("Child");

},

3.this.$router.push({path:"/child"}) ,通过路由的path跳转

跳转

go2(){this.$router.push({path:"/child"});

},

4.带参数跳转 this.$router.push({path:"/child",params:{test:123}})

带参数跳转

go3(){this.$router.push({path:"/child?test=123"})

},

这种跳转的路由地址和参数是这样的，用问号拼接的，

获取路由参数,this.$route.query.paramsName

获取路由参数

getParams(){

console.log(this.$route.query.test); //123

}

5.跳转到上一个路由，this.$router.go(-1)

返回上一页

goback(){this.$router.go(-1);

}

6.命名路由的跳转，需要在配置路由上带上参数，

{

name:"Children",

path:"/children/:test",

component:Children

}

跳转带参数

这种跳转的路由地址和参数是这样的，用 / 拼接的，

获取路由参数：this.$route.params.xxx

获取路由参数

getParams(){

console.log(this.$route.params.test);

}

原文：https://www.cnblogs.com/luguankun/p/10289038.html