Vue3实战笔记(23)—路由Vue-Router 实战指南(关于路由命名那点事儿)

62 篇文章 1 订阅
62 篇文章 1 订阅


前言

除了 path 之外,你还可以为任何路由提供 name。
在 Vue Router 中,命名路由是一种通过指定名称来标识路由的方式,而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用,尤其是在链接到路由时,不必硬编码 URL,也不必在路由对象中查找路径字符串。


一、定义使用命名路由

示例:


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

在这个例子中,我们给路径为 /user/:username的路由命名为 user。
要链接到一个命名的路由,可以向 router-link 组件的 to 属性传递一个对象:


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

这跟代码调用 router.push() 是一回事:

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

在这两种情况下,路由将导航到路径 /user/erina。

二、命名视图

有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

代码如下(示例):


<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>

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)


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

来个复杂点的嵌套命名视图:
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例:


/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+
  • Nav 只是一个常规组件。

  • UserSettings 是一个视图组件。

  • UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

注意:我们先忘记 HTML/CSS 具体的布局的样子,只专注在用到的组件上。
UserSettings 组件的 部分应该是类似下面的这段代码:


<!-- UserSettings.vue -->
<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
    }
  }]
}

总结

命名路由是 Vue Router 提供的一个非常实用的功能,它可以帮助你更好地组织和管理应用中的路由。
命名路由的好处:
可读性: 使用路由名称而不是路径,使得代码更加直观和易于理解。
维护性: 如果路由路径发生变化,只需要修改路由配置,而不用到处替换字符串路径。
参数传递: 在使用命名路由时,可以更方便地传递参数,特别是路径参数。

命名视图是 Vue Router 提供的一个强大的功能,它可以帮助你创建复杂的页面布局,并且使得路由管理更加灵活和高效。
命名视图的好处:
布局管理: 命名视图允许你在一个路由中灵活地组合和管理多个组件,这对于页面布局非常有用。
组件复用: 你可以在不同的路由中使用相同的命名视图,从而复用组件。
代码组织: 通过命名视图,你可以更好地组织代码,使得路由配置更加清晰。

人生就像一本书,愚蠢的人匆匆翻过,聪明的人细细品读

  • 12
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值