Vue聲明式導航與編程式導航示例分析講解

更新時間：2022年11月30日 10:43:19 作者：未及545

這篇文章主要介紹了Vue中聲明式導航與編程式導航，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

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

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

vue-router中的編程式導航

vue-router提供了許多編程式導航的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>

導航守衛(wèi)

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

全局前置守衛(wèi)

每次發(fā)生路由的導航跳轉(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

到此這篇關(guān)于Vue聲明式導航與編程式導航示例分析講解的文章就介紹到這了,更多相關(guān)Vue聲明式導航與編程式導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: