Vue Router(9)
摘要：导航守卫 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 全局的前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = createRouter({ ... }) router.beforeEach((to
阅读全文
posted @ 2022-02-17 14:51
随笔分类 - vue Router
Vue Router(8)
摘要：在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择 Hash模式 hash 模式是用 createWebHashHistory() 创建的 import { createRouter, createWebHashHistory } from 'vue-router' cons
阅读全文
posted @ 2022-02-17 12:54
Vue Router(7)
摘要：将 props 传递给路由组件 在你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，虽然这不一定是件坏事，但我们可以通过props配置来解除这种行为： 我们可以将下面的代码 const User = { template: '<div>User {{ $route.params.
阅读全文
posted @ 2022-02-17 11:12
Vue Router(6)
摘要：重定向 重定向也是通过 routes配置来完成，下面是 /home 重定向到 /： const routes = [{ path: '/home', redirect: '/' }] 重定向的目标也可以是一个命名的路由 const routes = [{ path: '/home', redirec
阅读全文
posted @ 2022-02-17 09:58
Vue Router(5)
摘要：命名路由 const routes = [ { path: '/user/:username', name: 'user', component: User } ] <router-link :to="{ name: 'user', params: { username: 'erina' }}">
阅读全文
posted @ 2022-02-16 19:25
Vue Router(4)
摘要：编程式导航 除了使用 router-link, 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 导航到不同的位置 注意：在 Vue 实例中，你可以通过 router 访问路由实例。因此你可以调用 this.$router.push 想要导航到不同的 UR
阅读全文
posted @ 2022-02-16 18:43
Vue Router(3)
摘要：嵌套路由 一些应用程序的UI由多层嵌套的组件组成。在这种情况下，URL的片段通常对应于特定的嵌套组件结构，例如： /user/johnny/profile /user/johnny/posts + + + + | User | | User | | + + | | + + | | | Profile
阅读全文
posted @ 2022-02-16 17:10
Vue Router(2)
摘要：带参数的动态路由匹配 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染， 但用户ID不同。在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数 const User = { template: '<
阅读全文
posted @ 2022-02-16 15:46
Vue Router(1)
摘要：Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，功能包括： 1、嵌套路由映射 2、动态路由选择 3、模块化、基于组件的路由配置 4、路由参数、查询、通配符 5、展示由 Vue.js 的过渡系统提供的过渡效果 6、HTML5 history 模式或 hash 模式
阅读全文
posted @ 2022-02-16 14:26
