• Vue Router-10-将 props 传递给路由组件
  将 props 传递给路由组件 在你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为： 我们可以将下面的代码 const User = { template: '<div>User </div>' } const routes = [{ pa...
  2021-08-29 13:01:55 | VUE
• Vue Router-09-重定向和别名
  重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const routes = [{ path: '/home', redirect: '/' }] 重定向的目标也可以是一个命名的路由： const routes = [{ path: '/home', redirect: { name: 'homepage' } }] 甚至是一个方法，动态...
  2021-08-29 13:01:55 | VUE
• Vue Router-08-命名视图
  命名视图 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。 你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。 如果 router-view 没有设置名字，那么默认为 default。 <router-view class="view left...
  2021-08-29 13:01:55 | VUE
• Vue Router-07-命名路由
  命名路由 除了 path 之外，你还可以为任何路由提供 name。 这有以下优点： 没有硬编码的 URL params 的自动编码/解码。 防止你在 url 中出现打字错误。 绕过路径排序（如显示一个） const routes = [ { path: '/user/:username',...
  2021-08-29 13:01:55 | VUE
• Vue Router-06-编程式导航
  编程式导航 除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 导航到不同的位置 注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。 想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 histo...
  2021-08-29 13:01:55 | VUE
• Vue Router-05-嵌套路由
  嵌套路由 一些应用程序的 UI 由多层嵌套的组件组成。 在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如： /user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User ...
  2021-08-29 13:01:55 | VUE
• Vue Router-03-带参数的动态路由匹配
  路由的匹配语法 大多数应用都会使用 /about 这样的静态路由和 /users/:userId 这样的动态路由，就像我们刚才在动态路由匹配中看到的那样，但是 Vue Router 可以提供更多的方式！ TIP 为了简单起见，所有的路由都省略了 component 属性，只关注 path 值。 在参数中自定义正则 当定义像 :userId 这样的参数时，我们内部使用以下的正...
  2021-08-29 13:01:55 | VUE
• Vue Router-03-带参数的动态路由匹配
  带参数的动态路由匹配 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。 在 Vue Router 中，我们可以在路径中使用一个动态段来实现，我们称之为 路径参数 ： const User = { template: '<div>User</div>', } //...
  2021-08-29 13:01:55 | VUE