zoukankan      html  css  js  c++  java
  • vue路由跳转的多种方式

    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);
          }
  • 相关阅读:
    高二下期末考试
    LG月赛.7
    CF1187E
    P5440 【XR-2】奇迹
    P1084 疫情控制
    P1083 借教室
    P2680 运输计划
    P3128 [USACO15DEC]最大流Max Flow
    博弈入门
    HDU 1907
  • 原文地址:https://www.cnblogs.com/luguankun/p/10289038.html
Copyright © 2011-2022 走看看