vue-router4之命名路由与命名视图

专栏目录请点击

命名路由

• 其实路由配置的时候我们可以传递一个name属性，含有name属性的路由是命名路由
• 命名路由可以对params自动编码和解码

定义

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

跳转

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

or

router.push({ name: 'user', params: { username: 'erina' } })

命名视图

当我们在同一级要展示多个视图，这个时候就需要我们使用命名视图了，这似乎与react的多组路由差不多 点击

如果路由没有设置名字，则默认为default 官网

简单使用

添加上了name属性

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

路由配置

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})

注意component加上了s

嵌套的命名视图

子路由的页面

<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>

嵌套的定义

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}