vue-router

最新推荐文章于 2024-05-02 17:08:02 发布
最新推荐文章于 2024-05-02 17:08:02 发布
阅读量91 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_69974492/article/details/124353126
版权

vue-router 路由守卫/导航守卫

一. 什么是路由导航守卫？

 路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
 就是在跳转页面的时候把路由拦下来 做一些操作 再放行

二. 路由导航守卫有几种？分别是什么？

  1. 全局守卫
    beforeEach 路由进入之前
    afterEach 进入之后
  1. 组件内守卫
    beforeRouteEnter 进入之前
    beforeRouteUpdate 更新之前
    beforeRouteLeave 离开之前
  1. 独享守卫
    beforeEnter 进入之前

三. 路由守卫的参数？

有三个参数：to from ,next

next 这个参数 在路由 3.x 版本的时候 是必须的
但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 :vue2 搭配 3.x 的路由
		  vue3 搭配 4.x 的路由

四. next的参数问题 ？

next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数
（回调函数:一个被作为参数传递的函数）
比如说 token 被存进 vuex 里就可以这么写：

  beforeRouteEnter(to, from, next) {
    // if (localStorage.getItem("token")) {
    //   next();
    // } else {
    //   next("/login");
    // }
    // 在这个组件路由守卫钩子函数中 没有this
    // 因为组件实例还没有创建出来
    next((vm) => {
      // vm就是 这个组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },
沐丶亦
关注
Vue入门【十一】-- 导航守卫与路由模式
qq_48802092的博客
10-04 1363
路由的两种模式及其区别？ hash模式：会在路由路径携带#，不会请求服务器，工作原理是hashchange事件,支持低版本浏览器 history模式：不会在路由路径携带#，会请求服务器，工作原理是go/back/ forward，是h5新增的api，不支持低版本浏览器。
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue-router 导航守卫 路由守卫
余的博客
04-22 1484
一. 什么是路由导航守卫？ 路由的导航守卫 又叫做路由的钩子函数（生命周期函数） 就是在跳转页面的时候把路由拦下来 做一些操作 再放行 二. 路由导航守卫有几种？分别是什么？ 全局守卫 beforeEach 路由进入之前 afterEach 路由进入之后 组件内守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前 独享守卫 beforeEnter 路由进入之前 三. 路由守卫的参数？ 有三个参数：to
【vue-router】路由导航守卫
七十多岁的人了、
10-30 390
路由导航守卫
关于Vue-Router4路由导航守卫的全面解析
web全栈开发的博客
11-11 1428
前言大家好，我是CoderBin，在写Vue项目的时候，少不了使用路由vue-router，而路由守卫是vue-router中一个非常重要的概念，也是非常重要的技巧。它能够很好的帮助开发者“监视”每一个跳转的路由。如果文中有不对、疑惑的地方，欢迎在评论区留言指正????高频面试总结【1】「2022」关于Vue的一些高频面试题总结【2】「2022」CSS最新高频面试题指南【3】「2022」TypeScri...
vue-router路由导航守卫
二七二十七的博客
07-27 311
全局路由守卫、独享路由守卫、组件内路由守卫使用方式
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router 路由导航守卫
廖若星辰-LTY
10-19 234
在vue-router路由的基本使用中我们已经介绍过路由的安装和配置等基本使用步骤了，下面我们再来介绍一个 vue-router 的高频使用方法——beforeEach() 路由导航守卫 在项目的实际应用过程中很多页面和权限是根据客户端的用户身份动态决定的，就比如有的场景是没有登录的用户无法访问到首页，必须先登录才能跳转到首页进行后续的操作，这样我们就需要使用到 vue-router 路由导航守卫来限制用户手动跳转页面的操作。 首先，比如我们的页面必须要用户先登录，且登录成功后服务器会生成一个 to..
Vue-router之导航守卫
weixin_34392843的博客
09-11 208
导航守卫 全局导航守卫 全局钩子 // client/index.js router.beforeEach((to, from, next) => { // 跳转前 console.log('before each invoked') next() // next 必须执行，才能跳转 }) router.beforeResolve((to, from, next) => { ...
Vue Router 导航守卫
qq_40930841的博客
05-02 1421
导航守卫用于控制路由的访问权限。例如，访问后台主页时，需要用户处于已登录状态，如果没有登录，则跳转到登录页面。用户在登录页面进行登录操作，若登录成功，则跳转到后台主页；若登录失败，则返回登录页面。导航守卫主要分为全局导航守卫导航独享守卫和组件导航守卫1.1全局导航守卫包括全局前置守卫beforeEach()和全局后置守卫afterEach()，在路由即将改变前和改变后进行触发。1.2导航独享守卫目前只有()守卫，只有在路由导航到一个不同的页面时才会被触发，()
router导航守卫
Anna_Liqi的博客
10-26 321
Vue-router Vue-router-全局导航守卫: beforeEach() 跟 afterEach()是全局守卫，只要跳转就会调用这两个函数 1、beforeEach()： 前置守卫（guard）: #全局导航守卫应用： 动态修改网页的标题？ beforeEach函数的使用， 当然我们也可以在每个vue页面实现create(){document.title="首页"}，页面太多无法维护，所以使用导航守卫, 前置钩子beforeEach()，就是路由跳转回调，跳转之前就把标题给改掉。 {
vue-router之 beforeRouteEnter
weixin_30741653的博客
11-14 390
beforeRouteEnter在每次路由切换都执行 ,而项目优化后,切换路由mounted只在最开始执行一次 beforeRouteEnter的具体用法可参考官方文档 https://cn.vuejs.org/v2/guide/migration-vue-router.html#activate-替换 需要注意的是： 在这期间路由跳转携带的数据发生改变会影响原数据，他们都指向同...
vue-router导航守卫
m0_72694993的博客
09-09 1334
1.3全局解析守卫：router.beforeResolve（回调函数） 在所有的组件内守卫和异步路由组件被解析之后。导航守卫其实与之前讲的vue生命周期的钩子比较相像。导航守卫分为三类：全局的、路由的、组件级的。3.2beforeRouteUpdate 复用的组件执行的守卫，可以获取最新的数据。的回调函数，创建好的组件实例会作为回调函数的参数传入。beforeEnter，这个守卫是配置在路由里边的。在被激活的组件里调用。在失活的组件里调用。在重用的组件里调用。解析异步路由组件。
Vue-router
最新发布
02-11
### Vue Router 安装 为了使用 Vue Router，在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖： ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有最新版本的 Vue Router 可供调用[^3]。 ### 配置 Vue Router 配置 Vue Router 主要涉及创建路由实例并将其挂载到 Vue 应用上。下面是一个简单的例子来展示如何设置基本的路由功能： ```javascript // 创建 routes.js 文件定义路径映射关系 import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes // 缩写为 `routes: routes` }) export default router; ``` 这段代码展示了如何导入必要的模块，定义页面组件对应的路径以及初始化路由器对象[^1]。 ### 使用 Vue Router 一旦完成了上述两步操作之后就可以在应用入口文件 main.js 中引入刚刚创建好的路由实例，并传给 Vue 实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就成功集成了 Vue Router 到应用程序当中去了。 对于更复杂的场景比如嵌套路由、导航守卫等功能，则可以参阅官方文档获取更多指导。 ### 示例 这里给出一个完整的简单案例用于理解整个流程： #### 1. 安装 Vue 和 Vue Router 假设已经有一个基于 Vue CLI 初始化的新工程，执行如下命令即可获得所需库支持： ```bash npm install vue@next vue-router@next ``` #### 2. 设置路由表 编辑 src/router/index.js 添加如下内容： ```javascript import { createRouter, createWebHashHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld"; const routes = [{ path: "/", component: HelloWorld }]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` #### 3. 修改主程序启动逻辑 最后调整 src/main.js 如下所示： ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; createApp(App).use(router).mount("#app"); ``` 以上就是关于 Vue Router 的快速入门指南，涵盖了从零开始构建带有路由功能的应用所需的全部知识点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值