vue 关于路由和导航守卫

vue 关于路由和导航守卫

一、路由的概念

hash地址与组件之间的对应关系

前端路由的工作方式：

1. 点击路由链接
2. 导致url地址中的hash值变化
3. 前端路由监听hash地址变化
4. 路由把hash地址对应的组件渲染到浏览器

二、路由的基本用法

vue-router官网

1、安装路由

目前最新 npm install vue-router@4
vue2适用 npm install vue-router@3.5.2 -S

2、创建路由模块，并挂载

在src目录下，新建router/index.js路由模块，内容如下：

//1、导入vue和vueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'//2、使用路由
Vue.use(VueRouter)//3、构造路由实例对象
const router = new VueRouter()//4、把实例对象导出,共享一个路由对象
export default router

在main.js中挂载

import router from '@/router/index.js'
//可以简化，不写index.js,因为引入的是文件夹，会自动找到文件夹下的index.jsnew Vue({render: h => h(App),//路由挂载router
}).$mount('#app')

3、在路由模块中声明路由的对应关系

import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
//3、构造路由实例对象
const router = new VueRouter({routes: [{ path: "/left", component: Left },{ path: "/right", component: Right }]
})//然后在要使用的地方写上占位符<router-link to="/left">左侧</router-link><router-link to="/right">右侧</router-link><router-view></router-view>

4、路由重定向

 { path: "/", redirect: "/left" },

三、嵌套路由

加上children

//3、构造路由实例对象
const router = new VueRouter({routes: [{ path: "/", redirect: "/left" },{ path: "/left", component: Left },{path: "/right",component: Right,redirect:"/right/tab1"children: [{ path: "tab1", component: Tabone },{ path: "tab2", component: Tabtwo }]}]
})

四、动态路由

把hash地址中可变部分定义为参数项，从而提高路由规则的复用性

   { path: "/movie/:id", component: Movie}

为路由规则开启props传参

   { path: "/movie/:id", component: Movie, props:true}在使用的组件中
<h3> {{id}}</h3>export default {props:['id']
}

五、导航守卫

1、声明式导航 && 编程式导航

声明式：点击链接，例如<a>、<rooter-link>

编程式：调用API方法实现跳转，例如push、replace、go三种方法

//跳转，增加一条历史记录
this.$router.push("/left")
//跳转，替换当前历史记录
this.$place("/left")
//在历史记录中前进或者后退，一般只前进或者后退一步，所以提供了back、forward代表前进或后退一步
this.$(-1)
this.$router.back()
this.$router.forward()

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

一般用于检测登录权限

2、全局前置守卫 

//只要发生路由跳转，必然触发before指定的回调函数
router.beforeEach(function(to,from,next){
//to将要访问的路由对象信息
//from表示要离开的对象信息
//next函数表示放行next()
})

控制访问权限例子：

//只要发生路由跳转，必然触发before指定的回调函数
router.beforeEach(function(to,from,next){if(to.path === '/main'){const token = Item('token')if(token){next()//有token值则直接访问后台主页} else{next('/login')//没有token，则跳转到登录页}}else{//不是访问后台主页，则直接放行next()}
})