VUE3路由Router导航、模式

川长思鸟来 2022-09-07 14:39 224阅读 0赞

> 路由守卫也称为导航守卫，用来对路由导航进行守卫，控制导航的跳转，可以进行权限的控制，分为：
> 
> 1、全局前置守卫：使用router.beforeEach  
> 2、全局解析守卫：使用router.beforeResolve  
> 3、全局后置钩子：使用router.afterEach
> 
> //当一个导航出发时，全局前置守卫将被调用  
> router.beforeEach((to,from,next) =>\{  
> //to 即将要访问的目标路由对象  
> //from 来源于哪个路由对象  
> //next是一个函数，表示下一步咋么做，如：next（）表示放行，next（'/login'）表示跳转到/login路径  
> \})

如果用户登录，就允许用户访问，没有登录就不允许访问。

index.js

//配置路由守卫
    router.beforeEach((to,from,next) =>{
    	//如果访问主页，则放行
    	if(to.path === '/'){
    		return next()
    	}
    	//如果用户未登陆，则跳转到主页
    	const user = sessionStorage.getItem('user')
    	if(!user){
    		return next('/')
    	}
    	//如果用户已登陆，则放行
    	next()
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70][]

**路由的模式：**

> **hash模式（默认）**  
> 原理：使用HTML的锚点技术，实现路由匹配和跳转  
> 缺点：地址中会出现\#号，比较丑陋
> 
> **history模式**  
> 原理：使用HTML5的History技术  
> 缺点:在生产环境下，如果用户在浏览器中直接访问url会返回404报错  
> 解决：需要后台服务器增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，  
> 则返回同一个页面

//引入
    import { createRouter, createWebHasHistory, createWebHistory } from 'vue-router'
    
    //创建路由实例
    const router = createRouter({
    	//history:createWebHashHistory(),//has模式
      history: createWebHistory(process.env.BASE_URL), //history模式
      routes  //路由配置项，上面配置的routes
    })

**编程式导航**

> 除了使用<router-link>组件来定义导航链接，还可以通过编写js代码，调用路由实例$router的方法来实现路由跳转，称为  
> 编程式导航
> 
> 路由实例$router，表示构建路由时的实例对象，主要用来对路由进行控制，称为路由控制对象
> 
> 该对象为所有组件共享的实例属性，在所有组件中都可以通过this.$router访问，且访问的都是同一个对象  
>

> ![20210823232710661.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70]: /images/20220829/7089a9c3a1fb4322a2ef8f11c20f9d01.png
[20210823232710661.png]: /images/20220829/bf8345540f254fc4b8ceb1013a88ac90.png