vue路由跳转的多种方式

Posted 2021-02-04 luguankun

1.router-link to 跳转

<router-link to="/child"><button>跳转</button></router-link>

 

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

<button @click="go()">跳转</button>

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

 

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

<button @click="go2()">跳转</button>

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

 

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

<button @click="go3()">带参数跳转</button>

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

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

 

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

<button @click="getParams()">获取路由参数</button>

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

 

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

<button @click="goback()">返回上一页</button>

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

 

6.命名路由的跳转，需要在配置路由上带上参数，<router-link :to={name:‘ComponentName‘,params:{test:123}}></router-link>

  {
      name:"Children",
      path:"/children/:test",
      component:Children
    }

<router-link :to="{name:‘Children‘,params:{test:123}}"><button>跳转带参数</button></router-link>

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

 

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

<button @click="getParams()">获取路由参数</button>

 getParams(){
         console.log( this.$route.params.test);
      }