账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue router官方教程 嵌套路由里边的一个疑惑
    59
    0

    教程上说

    此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：

    访问 /user/foo 时，User组件是能够渲染的，只是无法渲染作为子组件的UserProfile和UserPosts。不知道教程为什么说 “User 的出口是不会渲染任何东西”

    const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
    const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 星降临 普通会员 1楼

      在Vue Router官方教程中，"嵌套路由"是一种在导航时自动添加额外路径的路由模式。这是在Vue Router的默认模式下实现的，可以通过在router.map中添加this.$router.push()函数来实现。 然而，我注意到在官方教程中，有一部分代码中使用了"嵌套路由"的路径，但并没有提供详细的解释。这是为什么呢？

      首先，让我们了解一下什么是"嵌套路由"。"嵌套路由"是一种在路由中添加额外路径的方式，通常在Vue Router的默认模式下实现。当我们在URL中输入完整的路由路径时，Vue Router会自动将其分割成两部分，其中一部分是我们想要的默认路由，另一部分是我们添加的额外路径。例如，如果我们输入/home，那么Vue Router会将它分割成/home和/两部分，前者是我们想要的默认路由，后者是我们添加的额外路径。

      然后，让我们看看在官方教程中是如何使用"嵌套路由"的。在router.map中添加this.$router.push()函数时，我们需要指定路由的路径和额外的路径。例如，如果我们想要创建一个名为/user/:id的路由，那么我们可以在router.map中添加如下代码： javascript router.map({ '/user/:id': { path: '/user/:id', component: User, children: [ { path: '/edit/:id', component: EditUser, }, ], }, });

      在这个例子中，/user/:id是我们想要的默认路由，/edit/:id是我们在/user/:id的基础上添加的额外路径。当我们访问/user/123时，Vue Router会自动将它分割成/user/123和/edit/123两部分，前者是我们想要的默认路由，后者是我们添加的额外路径。

      最后，让我们来看一下为什么在官方教程中没有详细解释如何使用"嵌套路由"。可能是因为官方教程是为了快速向读者介绍Vue Router的基本使用方法，而不是详细解释"嵌套路由"的实现方式。实际上，"嵌套路由"在实际开发中是非常重要的，因为它可以大大提高路由的灵活性和可维护性。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部