Two Implementation Codes of Vue router Programmable Navigation

2021-11-01 02:07:38
OfStack

Two Ways of Page Navigation

Declarative navigation: The way to navigate by clicking on a link is called declarative navigation
For example, in ordinary web pages, <a></a> Link or in vue <router-link></router-link>
Programmatic navigation: By calling JavaScript Formal API The way to realize navigation is called programmatic navigation
For example, in ordinary web pages, location.href

Basic usage of programmatic navigation

Commonly used programmatic navigation API is 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 jump by programming    
    	this.$router.push('/register'); 
  } 
  } 
 }

Concrete or realized:


<!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  Documents  -->
 <!-- <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>
 <!--  Be  vm  The area controlled by the 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>

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

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

  const Register = {
  template: `<div>
   <h1>Register  Component </h1>
   <button @click="goBack"> Backward </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 routing instance object 
  // router: router
  router
  })
 </script>
 </body>
</html>

Parameter rules for router. push () method


 //  String ( Path name ) 
router.push('/home') 
//  Object  
router.push({ path: '/home' }) 
//  Named route ( Transfer parameter ) 
router.push({ name: '/user', params: { userId: 123 }}) 
//  With query parameters, become  /register?uname=lisi 
router.push({ path: '/register', query: { uname: 'lisi' }})