Vue声明式导航与编程式导航示例分析讲解
作者：未及545
声明式导航：在浏览器中，点击链接实现导航的方式，叫做声明式导航。如：普通网页中点击<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到此这篇关于Vue声明式导航与编程式导航示例分析讲解的文章就介绍到这了,更多相关Vue声明式导航与编程式导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！