Two implementation codes of Vue-router programmatic navigation

Two implementation codes of Vue-router programmatic navigation

Two ways to navigate the page

Declarative navigation: The way to achieve navigation by clicking on a link is called declarative navigation, for example: the <a></a> link in a normal web page or <router-link></router-link> in Vue
Programmatic navigation: The method of implementing navigation by calling JavaScript API is called programmatic navigation. For example: location.href in ordinary web pages

Basic usage of programmatic navigation

Commonly used programmatic navigation APIs are as follows:

this.$router.push ('hash address')

this.$router.go(n)

 const User = {  
 		template: '<div><button @click="goRegister">Jump to the registration page</button></div>',  
  	methods: { 
  	 goRegister: function(){   
    // Control route redirection programmatically this.$router.push('/register'); 
  } 
  } 
 }

Specific implementation:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>Document</title>
 <!-- Import vue file-->
 <!-- <script src="./lib/vue_2.5.22.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- <script src="./lib/vue-router_3.0.2.js"></script> -->
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head>
 <body>
 <!-- Area controlled by the vm instance-->
 <div id="app">
  <router-link to="/user/1">User1</router-link>
  <router-link to="/user/2">User2</router-link>
  <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
  <router-link to="/register">Register</router-link>

  <!-- Route placeholder -->
  <router-view></router-view>
 </div>

 <script>
  const User = {
  props: ['id', 'uname', 'age'],
  template: `<div>
   <h1>User component -- User id: {{id}} -- Name: {{uname}} -- Age: {{age}}</h1>
   <button @click="goRegister">Go to the registration page</button>
  </div>`,
  methods: {
   goRegister() {
   this.$router.push('/register') //Programmatic navigation}
  },
  }

  const Register = {
  template: `<div>
   <h1>Register Component</h1>
   <button @click="goBack">Go Back</button>
  </div>`,
  methods: {
   goBack() {
   this.$router.go(-1)
   }
  }
  }

  // Create a routing instance object const router = new VueRouter({
  // All routing rules routes: [
   { path: '/', redirect: '/user' },
   {
   // Named route name: 'user',
   path: '/user/:id',
   component: User,
   props: route => ({ uname: 'zs', age: 20, id: route.params.id })
   },
   { path: '/register', component: Register }
  ]
  })

  // Create vm instance object const vm = new Vue({
  //Specify the controlled area el: '#app',
  data: {},
  //Mount the router instance object// router: router
  router
  })
 </script>
 </body>
</html>

Parameter rules for the router.push() method

 // string (path name) 
router.push('/home') 
// Object router.push({ path: '/home' }) 
// Named routes (passing parameters) 
router.push({ name: '/user', params: { userId: 123 }}) 
// With query parameters, becomes /register?uname=lisi 
router.push({ path: '/register', query: { uname: 'lisi' }})

This is the end of this article about the implementation code of Vue-router programmatic navigation. For more relevant Vue router programmatic navigation content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue router passes parameters and solves the problem of parameter loss when refreshing the page
  • How to use Vue-router routing
  • Vue-router routing lazy loading and 3 ways to implement it
  • Summary of 3 ways to lazy load vue-router
  • Detailed explanation of the difference between hash mode and history mode in Vue-router
  • vue-router defines meta information meta operation
  • Vue router installation and usage analysis
  • Initial practice of vue3.0+vue-router+element-plus
  • How to handle the loss of parameters when refreshing the page when passing parameters to vue router

<<:  Tutorial on installing mysql5.7.18 on windows10

>>:  5 Ways to Clear or Delete Large File Contents in Linux

Recommend

A brief introduction to Vue filters, lifecycle functions and vue-resource

1. Filter Example: <!DOCTYPE html> <html...

Native JavaScript to achieve the effect of carousel

This article shares the specific code for JavaScr...

Detailed explanation of the implementation principles of call, apply, and bind in JavaScript

Table of contents Preface call usage accomplish A...

How to build a drag and drop plugin using vue custom directives

We all know the drag-and-drop feature of HTML5, w...

Analysis of the principles and usage of Linux hard links and soft links

In the Linux system, there is a kind of file call...

Installation tutorial of mysql 5.7 under CentOS 7

1. Download and install the official MySQL Yum Re...

Sample code for implementing follow ads with JavaScript

Floating ads are a very common form of advertisin...

Detailed explanation of using the at command for one-time scheduled tasks in Linux

Table of contents Preface 1. Introduction to one-...

MySQL InnoDB transaction lock source code analysis

Table of contents 1. Lock and Latch 2. Repeatable...

Without too much code, you can use hyperlinks to implement simple and beautiful custom check boxes

Today I suddenly thought that the styles of check ...

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles After going around in ...

The MySQL version is lower than the one that does not support two timestamp type values.

MySQL error: Error code: 1293 Incorrect table def...

$nextTick explanation that you can understand at a glance

Table of contents 1. Functional description 2. Pa...

Implementation process of row_number in MySQL

1. Background Generally, in a data warehouse envi...

Detailed examples of Zabbix remote command execution

Table of contents one. environment two. Precautio...