• 《Vue Router官方教程》

  • 价格:免费
  • 状态:全书已完结
  • 在读人数:28
  • 热度:1169
创建者
内容简介
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码
章节目录
  • 第一章 Vue Router的安装
  • Vue Router的安装有多种形式,这里面主要介绍三种。一.直接下载到本地或者通过CDNhttps://unpkg.com/vue-router@4 Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@4.0
  • 第二章 Vue Router基础知识
  • 2.1 入门
  • 用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子: HTML <script src="https://unpkg.com/vue@3"></scrip
  • 2.2 动态路由匹配
  • 带参数的动态路由匹配 很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径
  • 2.3 路由的匹配语法
  • 大多数应用都会使用 /about 这样的静态路由和 /users/:userId 这样的动态路由,就像我们刚才在动态路由匹配中看到的那样,但是 Vue Router 可以提供更多的方式!TIP:为了简单起见,所有的路由都省略了
  • 2.4 嵌套路由
  • 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构,例如: /user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User
  • 2.5 编程式导航
  • 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。导航到不同的位置 注意:在 Vue 实例中,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL,可以使
  • 2.6 命名路由
  • 除了 path 之外,你还可以为任何路由提供 name。这有以下优点: 1.没有硬编码的 URL 2.params 的自动编码/解码。 3.防止你在 url 中出现打字错误。 4.绕过路径排序(如显示一个) const routes = [{path: '/user/:username',name: 'user',component:
  • 2.7 命名视图
  • 有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。 <router-view class="vie
  • 2.8 重定向和别名
  • 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /home 重定向到 /: const routes = [{ path: '/home', redirect: '/' }] 重定向的目标也可以是一个命名的路由: const routes = [{ path: '/home&#3
  • 2.9 路由组件传参
  • 将 props 传递给路由组件 在你的组件中使用 $route 会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,但我们可以通过 props 配置来解除这种行为: 我们可以将下面的代码 const U
  • 2.10 不同的历史记录模式
  • 在创建路由器实例时,history 配置允许我们在不同的历史模式中进行选择。Hash 模式 hash 模式是用 createWebHashHistory() 创建的: import { createRouter, createWebHashHistory } from 'vue-router'const router = c
  • 第三章 高级应用
  • 3.1 导航守卫
  • 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = createRouter({ ... })router.beforeEach((to, from) =&gt
  • 3.2 路由元信息
  • 时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现,并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段: const routes = [{path: '/posts',component: PostsLayout,c
  • 3.3 数据获取
  • 有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现: 1.导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。2.导航完成之前获取:导航完成前,在路由进入
  • 3.4 Vue Router 和 组合式 API
  • 引入 setup 和 Vue 的组合式 API,开辟了新的可能性,但要想充分发挥 Vue Router 的潜力,我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。在 setup 中访问路由和当前路由 因为我们在 setup 里面没有访问 this,所以我们不能再直接访问 this.$router 或 this.$route。
  • 3.5 过渡动效
  • 想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API: <router-view v-slot="{ Component }"><transition name="fade&
  • 3.6 滚动行为
  • 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持 history.pushState 的浏览器中可用
  • 3.7 路由懒加载
  • 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。Vue Router 支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入: // 将 // import UserDetails from
  • 3.8 扩展 RouterLink
  • RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求,但它并未尝试涵盖所有可能的用例,在某些高级情况下,你可能会发现自己使用了 v-slot。在大多数中型到大型应用程序中,值得创建一个(如果不是多个)自定义 RouterLink 组件,以在整个应用程序中重用它们。例如导航菜单中的链接,处理外部链接,添加 inactive-class 等。让我们扩展 Ro
  • 3.9 导航故障
  • 当使用 router-link 组件时,Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面,但也有少数情况下用户将留在同一页面上: 1.用户已经位于他们正在尝试导航到的页面 2.一个导航守卫通过调用 return false 中断了这次导航 3.当前的导航守卫还没有完成时,
  • 3.10 动态路由
  • 对路由的添加通常是通过 routes 选项来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。添加路由 动态路由主要通过两个函数实现。router.addRoute
  • 第四章 后记
  • 4.1 API参考
  • <router-link> Props to 类型:RouteLocationRaw 详细内容: 表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个 string 或者是描述目标位置的对象。 <!-- 字符串 -->
  • 4.2 全书完
  • 谢谢阅读,全书完!
读者评论
  • 你还没登录,点击这里
  • 本书评论
最近这些人在读这本书