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 discussion on several situations where adding indexes to MySQL does not take effect

Adding indexes can improve query efficiency. Addi...

Solution to mysql login warning problem

1. Introduction When we log in to MySQL, we often...

MySQL View Principle Analysis

Table of contents Updatable Views Performance of ...

Detailed steps for developing WeChat mini-programs using Typescript

We don't need to elaborate too much on the ad...

JS implements request dispatcher

Table of contents Abstraction and reuse Serial Se...

React High-Order Component HOC Usage Summary

One sentence to introduce HOC What is a higher-or...

How to build a standardized vmware image for kubernetes under rancher

When learning kubernetes, we need to practice in ...

Detailed explanation of jquery tag selector application example

This article example shares the specific code of ...

HTML page header code is completely clear

All the following codes are between <head>.....

Detailed usage of React.Children

Table of contents 1. React.Children.map 2. React....

Docker installs redis 5.0.7 and mounts external configuration and data issues

Redis is an open source NoSQL database written in...

TypeScript union types, intersection types and type guards

Table of contents 1. Union Type 2. Crossover Type...

The complete implementation process of Sudoku using JavaScript

Table of contents Preface How to solve Sudoku Fil...

How to view the database installation path in MySQL

We can view the installation path of mysql throug...

An example of using a MySQL statement to find out the number of bytes occupied by various integers and their maximum and minimum values

Directly code: select 'bigint unsigned' a...