Vue 前端路由

最新推荐文章于 2022-10-29 15:12:42 发布
最新推荐文章于 2022-10-29 15:12:42 发布
阅读量87 收藏
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44499465/article/details/111272188
版权

路由的基本概念与原理

实现简易的前端路由

Vue Router 路由管理器

Vue-router的基本使用

Vue-router 路由重定向

Vue-router 路由嵌套

Vue-router 动态路由匹配

Vue-router 命名路由

Vue-router 编程式路由

路由的基本概念与原理

后端路由

  • 概念：根据不同的用户 URL 请求，返回不同的内容
  • 本质：URL 请求地址与服务器资源之间的对应关系

SPA

  • 后端渲染（存在性能问题）
  • AJAX前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
  • SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
  • SPA实现原理之一：基于url地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的url请求）
  • 在实现spa的过程中，最核心的技术点就是前端路由

前端路由

  • 概念：根据不同的用户事件，显示不同的页面内容
  • 本质：用户事件与事件处理函数之间的对应关系

实现简易的前端路由

01.模拟路由.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>

      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>

    <script>
      // #region 定义需要被切换的 4 个组件
      // 主页组件
      const zhuye = {
        template: '<h1>主页信息</h1>'
      }

      // 科技组件
      const keji = {
        template: '<h1>科技信息</h1>'
      }

      // 财经组件
      const caijing = {
        template: '<h1>财经信息</h1>'
      }

      // 娱乐组件
      const yule = {
        template: '<h1>娱乐信息</h1>'
      }
      // #endregion

      // #region vue 实例对象
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        // 注册私有组件
        components: {
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      // #endregion

      // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
      window.onhashchange = function() {
        // 通过 location.hash 获取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>
</html>

在这里插入图片描述

  • 引入vue文件，注册四个私有组件，，根据comName映射对应组件
  • 在点击a标签如主页 ，页面的hsah值会变化，这里会变为#/zhuye,通过 window.onhashchange监听hsash值变化映射不同的组件即可，这就是前端路由实现原理。

Vue Router 路由管理器

  • 支持HTML5 历史模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由
  • 路由导航守卫
  • 路由动画
  • 等等

Vue-router的基本使用

  1. 引入相关库文件
  2. 添加路由链接
  3. 添加路由占位符
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到Vue 根实例中

02.vue_router 的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 1.导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <!-- 2.添加路由链接 -->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 3.添加路由占位符-->
      <router-view></router-view>
    </div>

    <script>
      // 4.定义路由组件
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 5.配置路由规则并创建路由实例
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        // 6.把路由挂载到根实例
        router
      })
    </script>
  </body>
</html>

在这里插入图片描述

Vue-router 路由重定向

路由重定向指的是：用户在访问地址 A 的shih，强制用户跳转到地址 C，从而展示特定的组件页面；路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。

const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

路由规则中使用redirect，在访问/时会强制跳转到/user。

Vue-router 路由嵌套

04.路由嵌套.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

在父组件中添加子路由链接，然后在路由规则中，在父组件路由中添加children[ {路由1}, {路由2} ]。
在这里插入图片描述

Vue-router 动态路由匹配

动态路由匹配：如果某些路由规则他们的一部分是完全一样的，只有另一部分是动态变化的，我们可以把动态变化的部分形成路由参数，这些路由参数就叫做动态路由匹配。

05.动态路由匹配1.html（动态路由匹配的基本用法）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>
  • 路由规则中通过 :叉叉 匹配
  • 组件中可以通过 $route.params.叉叉 获取对应数据。

06.动态路由匹配2.html（路由组件传递参数）

  • $route 与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
  • props的值为 布尔类型，只要在路由规则中把props 设置为true，route.params 将会被设置为组件属性。
 { path: '/user/:id', component: User, props: true }
  • 然后在组件中使用props接收路由参数
const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: true },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>
  • props为函数类型
 {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          }
  • 组件中可以接收对象值
const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

Vue-router 命名路由

为了更方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。下面把/user/3改造为了命名路由。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

Vue-router 编程式路由

  • 声明式导航：通过点击链接实现导航的方式，叫做声明导航，例如：普通网页中的链接 或 vue 中的
  • 编程式导航：通过调用 JavaScript 形式的 API 实现导航的方式，叫做编程式导航。例如：普通网页中的 location.href
  • 常见的编程式导航API如下：
    1. this.$router.push(‘hash地址’)
    2. this.$router.go(n)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>
  • 定义路由规则
  • 绑定一个方法，在方法内使用编程式路由
_wayliu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端路由
HiterCoder
04-24 299
1、Vue路由，路由的基本概念与原理。 答：1）、路由是一个比较广义和抽象的概念，路由的本质就是对应关系。2）、在开发中，路由分为，后端路由和前端路由。3）、后端路由，根据不同的用户URL请求，返回不同的内容。后端路由的本质就是URL请求地址与服务器资源之间的对应关系。后端路由根据不同的URL地址分发不同的资源。4）、前端路由，根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事...
2024年前端最全vue路由详解版一目了然，字节前端面试必问
最新发布
2401_84411433的博客
05-06 570
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
vue前端路由
heartToSky的博客
01-23 872
在前端的发展中经历了模板引擎渲染，ajax渲染和前端路由三个进程 模板引擎后端渲染 在最开始用户向服务段发起访问请求时，后端拿出请求的页面和相关的数据，用一套模板引擎，将需要替换的内容做特殊标记，然后通过正则找到并且替换为需要的数据，此时后端直接渲染好了整个页面，然后将该页面传递用户端，这样的好处是用户一次可以拿到整个页面，也有利于SEO优化 ajax 当ajax技术出现后，以ajax为核心的无刷新部分内容渲染开始变得主流，当用户向后端发起访问请求时，后端会根据不同URL传递不同的页面，然后在加载过程中用a
vue前端路由的学习
08-10
在“vue前端路由的学习”中，我们将深入探讨 Vue Router 的核心概念和实践技巧。 1. **安装和配置 Vue Router** 在开始之前，需要确保已经安装了 Vue.js。然后，可以通过 npm 或 yarn 安装 Vue Router： ``` npm...
Vue全家桶（四）：Vue前端路由（视频课程）.zip
08-21
目录 1.路由的基本概念与原理 2.Vue-router的基本使用 3.Vue-router嵌套路由 4.Vue-router动态路由匹配 5.Vue-router命名路由 6.Vue-router编程式导航 7.基于Vue-router的案例
vue前端开发实战PPT
01-25
Vue前端开发实战PPT系列涵盖了从基础到高级的Vue开发技能，旨在帮助开发者提升项目实战能力。 首先，从标题和描述我们可以看出，这个系列主要关注Vue的实际应用，通过一系列的PPT教程来教授开发人员如何有效地使用...
浅析前端路由简介以及vue-router实现原理
08-27
前端路由简介以及vue-router实现原理 前端路由是指在客户端浏览器中，根据不同的 URL 路径，请求不同的资源，请求不同的页面的一种方式。前端路由的出现是为了实现单页应用（SPA），使得页面交互更加流畅。 前端...
前端vue路由
02-28
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，以其简洁的API和高效的性能在Web开发领域占据了重要地位。Vue Router是Vue.js官方推荐的路由管理库，它允许我们在单页应用（SPA）中轻松地管理和导航不同...
10-06-vue-router 路由
ange997的博客
09-05 140
spa single-page application，单页应用。一个应用程序只有一个页面。 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内容（通过div切换显示和隐藏，或者是数据的渲染），从而实现U
Vue的前端路由
紫月i的博客
09-19 277
前端路由与后端路由： 后端路由：根据不同的请求地址响应不同的内容 Vue前端路由：通过改变URL的hash值，根据hash的变化控制组件的切换 前端路由用法： 点击a连接就会改变hash值 //监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件名称 window.onhashchange = function(){ //通过location.hash获取到最新的hash值 } Vue Router的基本使用： 官网：https://router.v
Vue 前端路由 vue-router
bujiongdan的博客
08-05 519
1、前端路由 后端路由：多页面，服务器端渲染好返回给浏览器。 前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。 SPA：前后端分离+前端路由。 SPA只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理。   2、vue-router 路由不同的页面事实上就是加载不同的组件。     需要安装vue-ro...
vue学习---前端路由
茹嗨瑞的博客
10-29 791
我们通过vue-cil脚手架工具创建的项目是单页面应用，我们把单页面应用称为single page app 简称spa，单页面就是只有一个html代码 Vue.js 路由允许我们通过不同的 URL 访问不同的内容（不同的组件）, 实现单页面应用的多页面切换效果。（通过url的改变切换不同的组件） Vue.js 路由需要载入 vue-router 库.vue-router 库是独立vue之外的，可以有也可以没有，若要实现不同的 URL 访问不同的内容（不同的组件）可以用vue-router，如果不用vue
Vue学习之前端路由
u012967454的博客
11-18 223
前端路由 什么是前端路由 路由是根据不同的url地址展示不同的内容或页面 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的 什么时候使用前端路由 在单页面应用，大部分页面结构不变，只改变部分内容的使用 优点： 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点： 不利于SEO 使用浏览器的前进，后退键的时...
四、vue前端路由（轻松入门vue）
莫安逸无风雪
06-12 1875
Vue前端路由七、Vue前端路由1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由vue-router基本概念2. vue-router的基本使用基本使用步骤路由重定向3. vue-router嵌套路由嵌套路由功能分析实例demo4. vue-router动态路由匹配通过动态路由参数的模式进行路由匹配路由组件传递参数5. vue-router命名路由6. vue-router编程式导航 七、Vue前端路由 1. 路由的基本概念与原理 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 后端路
vue3 前端路由限制
06-09
Vue3 前端路由限制可以通过导航守卫来实现。导航守卫分为全局守卫和路由守卫两种： 1. 全局守卫：beforeEach、afterEach、beforeResolve。 这些全局守卫可以在跳转路由前、跳转路由后、跳转路由前解析异步路由时进行限制。可以在全局守卫中对用户身份、权限、路由跳转目标等进行判断，如果不符合条件，可以中断路由跳转或者跳转到其他路由。 2. 路由守卫：beforeEnter、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。 这些路由守卫可以在跳转到指定路由前、路由组件加载前、路由组件更新前、路由组件离开前进行限制。可以在路由守卫中对用户身份、权限、路由跳转目标等进行判断，如果不符合条件，可以中断路由跳转或者跳转到其他路由。 在Vue3中，可以通过路由配置中的meta字段来进行路由限制的配置，例如： ```javascript const routes = [ { path: '/admin', component: Admin, meta: { requiresAuth: true } } ] ``` 在路由守卫中可以通过to.meta.requiresAuth来获取路由限制配置信息，进行相应的判断和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值