Skip to main content

Vue Router 中的几个概念

wKevin

/user 匹配到第 2 个路由上，第 2 根白线所示，因为是一级路由，与所有一级路由一样（如：/），都会在 App.vue 的 <RouterView> 上渲染。

命名视图​

第 2、3 根白线，发现 components 中有多个组件，就根据 <RouterView> 中的有 name 的进行渲染，所以可以达到“命名视图根据 routes 中是否定义而进行选择性渲染”的效果。

这样 Header 就可以选择性出现了，选择权在 routes 的定义中。

嵌套路由​

/user/3 先匹配到 /user/:id 上（第 3 根白线），命名视图依然会起效，在 App.vue 的 <RouterView> 中渲染。

/user/3/foo or /user/3/bar 首先同上，但继续会发现 children 中的嵌套路由，继续匹配，但会在父组件中的 <router-view /> 中渲染，而不是 App.vue 中的。

嵌套路由可以防止路由更新时整体网页重新渲染。

命名路由​

不要与前面的命名视图混淆了。

在用 <RouterLink> 生成嵌套路由的 URL 时，可以有几种方式：

  1. 使用相对路径，如： to:"./foo" —— 但这基本上很难正常工作，因为相对路径很容易变化。
  2. 使用命名路由：无论是哪一级路由，都可以起个唯一性的 name，<RouterLink :to="{name: ...}"> 即可构造出目标 URL。