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

How to install MySQL and Redis in Docker

This article is based on the CentOS 7.3 system en...

Solution to the problem of not being able to access the Internet when installing centos7 with VmWare

What to do if VmWare cannot access the Internet w...

About the pitfalls of implementing specified encoding in MySQL

Written in front Environment: MySQL 5.7+, MySQL d...

Use Shell scripts to batch start and stop Docker services

Table of contents Start Docker Stop Docker Python...

An article to quickly understand Angular and Ionic life cycle and hook functions

Table of contents Angular accomplish Calling orde...

Several practical scenarios for implementing the replace function in MySQL

REPLACE Syntax REPLACE(String,from_str,to_str) Th...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

VMware12 installs Ubuntu19.04 desktop version (installation tutorial)

1. Experimental description In the virtual machin...

TypeScript union types, intersection types and type guards

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

Summary of Linux nc command

NC's full name is Netcat (Network Knife), and...

Native JavaScript carousel implementation method

This article shares the implementation method of ...

CSS multi-level menu implementation code

This is a pretty cool feature that makes web page...

Detailed explanation of Vue slot

1. Function : Allows the parent component to inse...

Differences between Windows Server win2003, win2008R2, win2012, win2016, and win2019 system versions

Recently, Microsoft released the 2019 server syst...