9.Vue 动态设置路由参数

在vue种 可以动态设置路由参数:

1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0

注意 使用go时 必须是已经有访问历史记录了

案例:

  <template>
    <div>  
        <button @click="goht">后退<button> <br/>
        <button @click="goqj">前进<button> <br/>
        <button @click="gosx">刷新当前<button>
    </div>
  </template>
  <script>
    export default {
        methods: {
          goht(){
              this.$router.go(-1);
          },
          goqj(){
                this.$router.go(1);
          },
          gosx(){
              this.$router.go(0); //或者 this.$router.go(); 
          }
        }
    }
  </script>

2.使用push调用:

案例

<template>
    <div>
          <button @click="pageA">去A页面</button>  <br/>
          <button @click="pageB">去B页面</button>  <br/>
    </div>
</template>
<script> 
  exprot default {
    methods: {
          pageA(){
               //去路由A页面,字符串形式只能是path,类似to="path"
              this.$router.push('/RouterA');  
          },
          pageB(){
               //去路由B页面,数组形式,类似 :to="{}"
              this.$router.push(
                  {
                    name: 'RouterB',
                    query: {'name': 'name1', title: 'title1'}
                    //,params:{'name': 'name2', title: 'title2'}
                  }
              );
          }
     }
  }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.定位 在开始运营一个微信公众号之前可以从以下三个维度来思考定位 1.1.用户定位:搞清楚目标用户是谁,目标用户...
    多多的爱阅读 799评论 0 1
  • “男人最在意的,是两个人在一起的状态”“女人最纠结的,永远是他到底爱不爱我” 1 我发现一个很有意思的事情,在女人...
    YIBAO阅读 1,581评论 15 20