Vue声明式导航与编程式导航示例分析讲解

声明式导航:在浏览器中,点击链接实现导航的方式,叫做声明式导航。如:普通网页中点击<a>链接,vue中点击<router--link>都属于声明式导航。

编程式导航:在浏览器中,调用API方法实现导航的方式,叫做编程式导航。如:普通网页中调用location.href跳转到新页面的方式,属于编程式导航。

vue-router中的编程式导航

vue-router提供了许多编程式导航的API,其中最常用的三种API分别是:

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

跳转到指定hash地址,并增加一条历史记录。

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

跳转到指定的hash地址,并替换掉当前的历史记录。

3.this.$router.go(数值n)

在浏览历史前进或后退,()中的值为整数,负值代表后退,正值代表前进。

在实际开发中,一般只会前进或后退一层页面,因此可用简化用法:

①$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">跳转到金玉良缘</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>

导航守卫

导航守卫可以控制路由的访问权限。

全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,我们可以对每个路由进行访问权限的控制。

next的三种调用方式:

1.当前用户拥有后台主页的访问权限,直接放行:next()

2.当前用户没有后台主页的访问权限,强制其跳转到登录页面:next("/login")

3.当前用户没有后台主页的访问权限,不允许跳到后台主页: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,则放行,如果没有,则强制跳转到/login登录页
  if(to.path==="/background"){
    const token=localStorage.getItem("token")
    if(token){
      next()
    }else{
      next("/login")
    }
  }else{
    next()
  }
})
// 4.向外共享路由的实例对象
export default router
作者:未及545 原文地址:https://blog.csdn.net/qq_72760247/article/details/127499983

%s 个评论

要回复文章请先登录注册