Declarative navigation: In the browser, clicking on the link to implement navigation is called declarative navigation. For example: clicking on the <a> link in a normal web page and clicking on the <router--link> in vue are all declarative navigation.
Programming navigation: In the browser, the method of calling API methods to implement navigation is called programmable navigation. For example: the method of calling to jump to a new page in a normal web page is a programming navigation.
Programming Navigation in vue-router
vue-router provides many programming navigation APIs, among which the three most commonly used APIs are:
.$("hash address")
Jump to the specified hash address and add a history.
.$("hash address")
Jump to the specified hash address and replace the current history.
.$(value n)
In the browsing history, the value in () is an integer, the negative value represents the backward, and the positive value represents the forward.
In actual development, the page will generally only go forward or backward one layer, so simplified usage can be used:
①$()
In History, back to the previous page.
②$()
In History, proceed to the next page.
<template lang="">
<div>
musicComponents
<!-- <p>{{this.$}}</p> -->
<p>{{id}}</p>
<button @click="btn">Click to printthis</button>
<button @click="goTo">Jump to Jinyuliangye</button>
<button @click="$()">Back</button>
<button @click="$()">go ahead</button>
</div>
</template>
<script>
export default{
props:["id"],
methods:{
btn(){
(this);
},
goTO(){
this.$("/music4")
}
}
}
</script>
<style lang="less" scoped>
div{
width: 100%;
height: 50px;
background-color:orangered;
}
</style>Navigation Guard
Navigation Guard can control access to routes.
Global front guard
Every time a routed navigation jump occurs, the global forward guard will be triggered. Therefore, in the global pre-guard, we can control access rights for each route.
Three ways to call next:
1. The current user has access to the background home page, and directly release it: next()
2. The current user does not have access to the home page of the background, force it to jump to the login page: next("/login")
3. The current user does not have access to the background homepage, so it is not allowed to jump to the background homepage: next (false)
import Vue from "vue";
import VueRouter from "vue-router";
import child from "@/components/"
import left from "@/components/"
import right from "@/components/"
import Tab1 from "@/components/tabs/"
import Tab2 from "@/components/tabs/"
import music from "@/components/"
import login from "@/components/"
import background from "@/components/"
(VueRouter)
const router=new VueRouter({
routes:[
{path:"/",redirect:"/firstPage"},
{path:"/music:id",component:music,props:true},
{path:"/firstPage",component:child,redirect:"/firstPage/tab1",children:[
{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]},
{path:"/img",component:left},
{path:"/video",component:right},
{path:"/login",component:login},
{path:"/background",component:background}
]
})
(function(to,from,next){
// To get the hash address the user will access // Determine whether the hash address is equal to /background // If it is equal, it is proved that you need to log in before accessing successfully // If it is not equal, you do not need to log in and release it directly // If the accessed address is /background, you need to read the token value in localStorage // If there is a token, release it. If there is no, force jump to the /login login page if(==="/background"){
const token=("token")
if(token){
next()
}else{
next("/login")
}
}else{
next()
}
})
// 4. Share the instance object of routed outwardexport default routerThis is the article about the analysis and explanation of Vue declarative navigation and programming navigation examples. For more related contents of Vue declarative navigation and programming navigation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!