Introduction to dynamically setting routing parameters in Vue

This article mainly introduces the case analysis of Vue dynamically setting routing parameters. It is very good and has reference value. Friends in need can refer to it

You can dynamically set routing parameters in Vue:

1. Use this.$router.go(), the same as js history.go() Usage is the same, forward 1, backward -1, current page: 0

Note that when using go, there must already be an access history record

Case:

<template>
  <p> 
    <button @click="goht">后退<button> <br/>
    <button @click="goqj">前进<button> <br/>
    <button @click="gosx">刷新当前<button>
  </p>
 </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. Use push call:

Case

<template>
  <p>
     <button @click="pageA">去A页面</button> <br/>
     <button @click="pageB">去B页面</button> <br/>
  </p>
</template>
<script> 
 exprot default {
  methods: {
     pageA(){
        //去路由A页面，字符串形式只能是path，类似to="path"
       this.$router.push(&#39;/RouterA&#39;); 
     },
     pageB(){
        //去路由B页面，数组形式，类似 :to="{}"
       this.$router.push(
         {
          name: &#39;RouterB&#39;,
          query: {&#39;name&#39;: &#39;name1&#39;, title: &#39;title1&#39;}
          //,params:{&#39;name&#39;: &#39;name2&#39;, title: &#39;title2&#39;}
         }
       );
     }
   }
 }
</script>

The above is the entire content of this article, I hope it will be useful for everyone’s learning For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to use vuex’s state object

Reconstruct the multi-page scaffolding process based on vue cli Introduction

The above is the detailed content of Introduction to dynamically setting routing parameters in Vue. For more information, please follow other related articles on the PHP Chinese website!