聲明式導(dǎo)航：在瀏覽器中，點擊鏈接實現(xiàn)導(dǎo)航的方式，叫做聲明式導(dǎo)航。如：普通網(wǎng)頁中點擊<a>鏈接，vue中點擊<router--link>都屬于聲明式導(dǎo)航。

編程式導(dǎo)航：在瀏覽器中，調(diào)用API方法實現(xiàn)導(dǎo)航的方式，叫做編程式導(dǎo)航。如：普通網(wǎng)頁中調(diào)用location.href跳轉(zhuǎn)到新頁面的方式，屬于編程式導(dǎo)航。

vue-router中的編程式導(dǎo)航

vue-router提供了許多編程式導(dǎo)航的API，其中最常用的三種API分別是：

1.this.$router.push("hash地址")

跳轉(zhuǎn)到指定hash地址，并增加一條歷史記錄。

2.this.$router.replace("hash地址")

跳轉(zhuǎn)到指定的hash地址，并替換掉當前的歷史記錄。

3.this.$router.go(數(shù)值n)

在瀏覽歷史前進或后退，（）中的值為整數(shù)，負值代表后退，正值代表前進。

在實際開發(fā)中，一般只會前進或后退一層頁面，因此可用簡化用法：

①$router.back()

在歷史記錄中，后退到上一個頁面。

②$router.forward()

在歷史記錄中，前進到下一個頁面。

<template lang=""><div>music組件<!-- <p>{{this.$route.params.id}}</p> --><p>{{id}}</p><button @click="btn">點擊打印this</button><button @click="goTo">跳轉(zhuǎn)到金玉良緣</button><button @click="$router.back()">后退</button><button @click="$router.forward()">前進</button></div> </template> <script> export default{props:["id"],methods:{btn(){console.log(this);},goTO(){this.$router.replace("/music4")}} } </script> <style lang="less" scoped> div{ width: 100%; height: 50px; background-color:orangered; } </style>

導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)可以控制路由的訪問權(quán)限。

全局前置守衛(wèi)

每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時，都會觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，我們可以對每個路由進行訪問權(quán)限的控制。

next的三種調(diào)用方式：

1.當前用戶擁有后臺主頁的訪問權(quán)限，直接放行：next（）

2.當前用戶沒有后臺主頁的訪問權(quán)限，強制其跳轉(zhuǎn)到登錄頁面：next（"/login")

3.當前用戶沒有后臺主頁的訪問權(quán)限，不允許跳到后臺主頁：next（false）

import Vue from "vue"; import VueRouter from "vue-router"; import child from "@/components/child.vue" import left from "@/components/left.vue" import right from "@/components/right.vue" import Tab1 from "@/components/tabs/Tab1.vue" import Tab2 from "@/components/tabs/Tab2.vue" import music from "@/components/music.vue" import login from "@/components/login.vue" import background from "@/components/background.vue"Vue.use(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}] })router.beforeEach(function(to,from,next){// 要拿到用戶將要訪問的hash地址// 判斷hash地址是否等于/background// 如果等于，證明需要登錄之后，才能訪問成功// 如果不等于，則不需要登錄，直接放行// 如果訪問的地址是/background，則需要讀取localStorage中的token值// 如果有token，則放行，如果沒有，則強制跳轉(zhuǎn)到/login登錄頁if(to.path==="/background"){const token=localStorage.getItem("token")if(token){next()}else{next("/login")}}else{next()}}) // 4.向外共享路由的實例對象 export default router

總結(jié)

以上是生活随笔為你收集整理的声明式导航编程式导航的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。