VUE3路由Router导航、模式

路由守卫也称为导航守卫，用来对路由导航进行守卫，控制导航的跳转，可以进行权限的控制，分为：

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()
})

路由的模式：

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访问，且访问的都是同一个对象

VUE3路由Router导航、模式相关推荐

vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
vue3 路由的使用
路由的使用在传统的 Web 开发过程中,当需要实现多个站内页面时,以前需要写很多个 HTML 页面,然后通过标签来实现互相跳转. 在如今工程化模式下的前端开发,像 Vue 工程,可以轻松实现只用一 ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
Blazor 路由及导航开发指南
翻译自 Waqas Anwar 2021年4月2日的文章 <A Developer's Guide To Blazor Routing and Navigation> [1] 检查传入的请 ...
使用Angular Router导航基础
名称简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...
路由器AP、路由、桥接模式有什么区别【详细介绍】
现在的路由大多数已经开始支持多种网络连接模式,那么我们就挑一款模式最全的路由来了解各种模式的区别吧!下文将以TP-Link迷你无线路由器为例.在TP-Link迷你无线路由器上一般有AP(接入点)模式. ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...

VUE3路由Router导航、模式

VUE3路由Router导航、模式相关推荐

最新文章

热门文章