9.Vue 动态设置路由参数

作者: 圆梦人生 | 来源:发表于2018-04-24 11:35 被阅读57次

在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>

相关文章

  • 9.Vue 动态设置路由参数

    在vue种 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() ...

  • vue-router 基础知识

    1. 动态路由匹配 路径参数以 : 标记,参数值会被设置到this.$route.params。使用路由参数,例如...

  • 动态路由理解

    一、通过配置动态路由进行页面跳转同时进行参数传递 1、配置路由 2、跳转设置 ----------》注意这种方式...

  • vue-router

    动态路由匹配 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.p...

  • Vue常见面试题

    1.怎么定义vue-router的动态路由?怎么获取传递过来的动态参数? 何为动态路由?能够提供参数的路由即为动态...

  • 动态路由 & 嵌套路由实例

    1.动态路由 注意:动态路由以‘:’开头。$route 参数表见 “ 动态路由 & 嵌套路由 ” 2.嵌套路由 注...

  • 动态路由传值

    动态路由: 能够传递参数的路由即为动态路由 在路由不变,参数发生变化时,不会再触发created,因为组件会被复用...

  • vue 动态路由

    什么是动态路由?带参数的路由就是动态路由 实际使用 路由中使用多段路径作为参数 !!! 路由组件复用 提醒一下,当...

  • vue 动态路由设置参数可选

    一、router/index.js 路由文件 1、只有一个参数 2、可以有多个参数 二、xxx.vue文件

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

网友评论

    本文标题:9.Vue 动态设置路由参数

    本文链接:https://www.haomeiwen.com/subject/kdndlftx.html