Detailed explanation of the steps to implement route jump using JavaScript in Vues

In Vue applications, using Vue Router to navigate between pages is a common requirement. This blog will use sample code to introduce in detail how to use JavaScript to implement routing jumps in Vue components, including two ways to pass parameters:paramsandquery. Let's get to know step by step.

Basic settings

First, make sure that Vue Router is installed and configured in your project. A basic Vue Router configuration might look like this (inrouter/In the file):

import Vue from 'vue'
import Router from 'vue-router'
import Seq from '@/components/Seq'

(Router)

export default new Router({
  routes: [
    {
      path: '/rd/proj/seq',
      name: 'Seq',
      component: Seq
    },
    // Other routing configurations...  ]
})

Use the method inside the template to achieve jump

Template section

In the template of the Vue component, you can define a button whose click event will trigger a function to perform a routing jump.

<template>
  <div>
    <button @click="navigateToSeq">Jump toSeqpage</button>
  </div>
</template>

Script section

In the script section, we definenavigateToSeqMethod to usethis.$Perform routing jump. Here we will show how to pass parameters.

Pass parameters using params

If you want the parameters not to be displayed in the URL path, you can useparams。

<script>
export default {
  methods: {
    navigateToSeq() {
      const row = { contractNo: '123' }; // Suppose this is the data obtained from somewhere      this.$({ name: 'Seq', params: { contractNo:  } });
    }
  }
}
</script>

Note, useparamsWhen receiving parameters need to be in the target componentbeforeRouteUpdateHook or passthis.$access.

Pass parameters using query

If you want to display parameters in the URL as a query string, you should usequery。

<script>
export default {
  methods: {
    navigateToSeq() {
      const row = { contractNo: '123' };
      this.$({ path: '/rd/proj/seq', query: { contractNo:  } });
    }
  }
}
</script>

usequeryWhen, you can passthis.$Get parameter values.

Receive parameters in the target component

take overparams

For passingparamsThe parameters passed in the target component () You cancreatedormountedLifecycle hook, or usewatchCome and listen$routeto obtain parameters.

export default {
  created() {
    (this.$); // Access the contract number passed through params  }
}

take overquery

forqueryParameters, acquisition method andparamssame:

export default {
  created() {
    (this.$); // Access the contract number passed through query  }
}

Through the above steps, you can flexibly use JavaScript to implement routing jumps and parameter passing between pages in Vue applications. Whether it is parameters hidden in URLs or parameters directly displayed in query strings, you can easily deal with them.

This is the end of this article about using JavaScript to implement routing jumps in Vues. For more related Vue JavaScript routing jump content, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!