当前位置: 首页 > 资讯 >

不只懂 Vue 语法:试解释嵌套路由与嵌套命名视图的概念?

问题回答

嵌套路由是指在一个 router-view 里包 router-view,像是在一个画框里,再加上一个画框。例如 /products/tshirt/products/shoes,做法可以是在 Product.vue 此页面元件里再加一个 router-view,用来切换显示 Tshirt 与 Shoes 元件。

至於嵌套命名视图,其实是结合「嵌套路由」和「命名视图」这两个概念。前者就是以上提到的意思。後者就是指,当一个画面要同时显示多於一 router-view 时,就必须要使用命名视图(named view)。

结合两者概念的话,就是指在一个 router-view 里包 router-view,并在内层的 router-view 里,再包多於一个的 router-view(需使用命名视图)。

虽然这题不是常见面试题,但实作时这两个概念出现的机会挺高。而且作为新手,自己也曾试过搞混了两者的意思,因此想写一篇文章来整理概念。

嵌套路由(Nested Routes)是什麽?

嵌套路由较易理解,先看看官方解说图:

截图自官方文件

简单说,就是在一个元件里放一个 router-view,在这里可以切换显示不同的元件。以上例子就是切换 Profile 与 Posts。

为什麽叫嵌套?因为如果你使用 Vue CLI,别忘了最顶层预设已经放了一个 router-view。示范一下,你刚建立 Vue CLI 专案时,会有以下预设程序码:

App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

你可以把 nav 删除,这样看就更清晰:

<template>
  <router-view/>
</template>

预设路由设定是:

router/ index.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

用 Vue 检查工具看,一目了然:

所以,初始化时,最顶层一定会有一个 router-view,不然没法显示元件。这个 router-view 的作用就像一个画框一样,你可以随时切换显示不同元件,也就是 SPA 的概念:

回到重点,如果在元件里,再加一个 router-view,并可以切换显示不同元件,这就是嵌套路由的意思了。白话讲,就是在一个画框里的元件上,再放一个画框,切换显示不同元件。

/about 页面为例,在 about 页面加上一个 router-view,切换显示 SkillsGreetingContact 这三个元件。

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-link to="/about/greeting"> Greeting</router-link>
    <router-link to="/about/skills"> Skills </router-link>
    <router-link to="/about/contact"> Contact </router-link>
    <router-view></router-view>
  </div>
</template>

使用 children 设定嵌套路由:
router/ index.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    children: [
      {
        path: 'skills',
        component: Skills
      },
      {
        path: 'greeting',
        component: Greeting
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
]

然後各自建立 Skills.vue、Greeting.vue、Contact.vue 的档案,这里就不示范了。目前 About 里的的概念如下:

结果就是在 About 元件里的 Router view 内,可以不断切换元件:

预设显示指定嵌套路由

注意,当你进入 /about 页面,结果会是空的,因为目前是路由是 /about ,并不是 /about/skills/about/greeting 或者 /about/contact。如果想预设显示某个嵌套路由的元件,举例说是 Skills,就要把 path 设定为 ''

router/ index.js

  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    children: [
      {
        path: '',
        component: Skills
      },
      ...
    ]
  }

结果访问 /about 时,就会渲染 Skill 元件。

嵌套命名视图(nested named view)是什麽?

了解过嵌套路由,就很快会理解嵌套命名视图。在这之前,要先知道什麽是命名视图。当一个画面里,我们想设置多於一个 router-view 时,其他 router-view 就需要具名,不然 Vue 不知道这些视图要放什麽元件。因此,命名视图就是当画面上有多於一个 router-view 时,所需要的元素。

以後台 dashboard 为例,在同一个画面里,左边 Sidebar,右边有 Banner 和 Content。我们在同一个画面放置 3 个 router-view,其中一个可以不用命名,即是预设 router-view,其余两个就要命名。

以上例子就是在 App.vue 放置 3 个 router-view,以下先省略 CSS 部分。

<template>
      <router-view name="Sidebar" />
      <router-view name="Banner" />
      <router-view/>
</template>

router/ index.js

const routes = [
  {
    path: '/',
    components: {
      default: Content,
      Banner,
      Sidebar
    }
  }
]

嵌套命名视图 = 嵌套路由 + 命名视图

嵌套命名视图就是结合以上提到「嵌套路由」、「命名视图」的概念。再以後台 dashboard 作例子。

假设现在有首页、产品页。在产品页里,有分 T-shirt 和 Shoes 产品。在 T-shirt 页里,用 2 个 router-view 显示男女装 T-shirt。而在 Shoes 页里,也用 2 个 router-view 显示 Sneakers 和 Boots。

所以,Product 页的结构如下:

  • Products.vue 是页面元件。
  • Sidebar 是在 Product.vue 里的元件。里面有 2 个 route-link,分别会连到 products/tshirtproducts/shoes
  • 用预设 router-view(即是匿名 router-view)来显示 WomenShirt。

详细程序码最後才分享,以下先看重点部分。

最外层 App.vue,放置 router-link 以及 router-view,让使用者切换浏览主页以及产品页:

<template>
  <router-link to="/"> Homepage </router-link>
  <router-link to="/products"> Products </router-link>
  <router-view />
</template>

点击 Products 後,进入 Products 页:

Products.vue

<template>
  <div class="page">
    <Sidebar />
    <div class="content">
      <!-- 当切换到 "/products/tshirt",以下才会显示-->
      <router-view />
      <router-view name="MenTshirt" />
      <!-- 当切换到 "/products/shoes",以下才会显示-->
      <router-view name="Sneakers" />
      <router-view name="Boots" />
    </div>
  </div>
</template>

以上画面中间内容是空,因为现在是在 /products,不是 /products/tshirt 或者 /products/shoes,所以不会显示这里的 router-view。当按下 Nav 的按钮,就能切换显示相应的 router-view。

看看核心部分 router / index.js

const routes = [
  {
    path: "/",
    component: Home
  },
  {
    path: "/products",
    component: Products,
    children: [
      {
        path: "tshirt",
        components: {
          default: WomenTshirt,
          MenTshirt
        }
      },
      {
        path: "shoes",
        components: {
          Sneakers,
          Boots
        }
      }
    ]
  }
];

以上可见,当切换到 /products/tshirt 时,才会显示 WomenTshirt 和 MenTshirt。/products/shoes 则会显示 Sneakers 和 Boots。

完整程序码

https://codesandbox.io/s/qian-tao-ming-ming-shi-tu-6cbmo?file=/src/App.vue:0-142

总结

  • 嵌套路由是指一个 router-view 里,再包一个 router-view
  • 当在同一个画面需要用多於一个 router-view,就需要用命名视图。
  • 嵌套命名视图就是结合以上两者的概念。

参考资料

Vue Router - 嵌套命名视图


相关文章:

  • [Day 02] 为什麽要用 Kubernetes?
  • 【Day 23】React 关於 Hook(3)
  • 【设计+切版30天实作】|Day5 - 做出3栏式「痛点」设计
  • 2021-Day28. Serverless(十 六):Deploy Ktor To Azure 的准备工作
  • 就先在这边帮他上了一个主题了 Day1
  • 虾皮串接实作笔记-串接 API 虾皮物流标签
  • 台南的空气是甜的吧
  • Day 2 - 谈谈伦理骇客
  • [NestJS 带你飞!] DAY15 - Dynamic Module
  • 每个人都该学的30个Python技巧|技巧 12:终止回圈咒语—break及continue(字幕、衬乐、练习)
  • Day 23:1974. Minimum Time to Type Word Using Special Typewriter
  • [Day3]资料库连线及新增使用者
  • DAY28 - EDM切版
  • 【Day 10】Repository 设计模式(Python)
  • 物件的建构与物件实体语法
  • 支持支付宝的国外VPS主机服务器大全:用支付宝买国外网站空间服务器VPS
  • VPS评测:阿里、腾讯、百度、京东VPS最低配理性对比
  • 国外抗攻击服务器推荐:DDOS高防服务器推荐
  • 海外营销周报:Facebook将对其广告工具进行调整,Linkedin恢复中国境内账号注册
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN
  • 移动怎么开通香港电话号码
  • 教程/Directory Lister逗比魔改版 Github开源(个人云)
  • 正规社交寻海外cps、网盟合作
  • Pinterest的商业指南(信息图):为什么以及如何在在Pinterest上推广你的业务
  • Git是什么?
  • 智能路由器刷华硕老毛子Padavan固件,实现巨多功能,你懂的!
  • 洛杉矶CN2服务器推荐:PCCW线路VPS,服务器服务商layerhost
  • 2021年10个全球电子商务趋势[信息图] ,所有电商人员都该了解一下
  • PayPal解决找回密码时无法检验身份问题
  • 以太坊是什么?以太坊原理和以太坊入门教程