《VueRouter爬坑第三篇》-嵌套路由

时间:2021-12-10 07:44:21

VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建。

项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送

后续VueRouter系列的文章的示例编写均基于该项目环境。


 VueRouter系列文章链接

  《VueRouter爬坑第一篇》-简单实践

  《VueRouter爬坑第二篇》-动态路由

  《VueRouter爬坑第三篇》-嵌套路由

  《VueRouter爬坑第四篇-命名路由、编程式导航》


 阅读目录

一.前言-从需求出发

二.需求实现

  1.菜单

  2.产品列表

  3.产品详情

三.主角-嵌套路由

四.总结


一.前言-从需求出发

  假设我们有这样一个需求和界面布局:
  《VueRouter爬坑第三篇》-嵌套路由

  左边是菜单区域,点击菜单栏的【产品】,右边内容区上面显示产品列表,点击某个产品名称下面显示产品详情。

  emmmm,突然想想这个需求造的有点鸡肋,但是也是为了从一个问题出发好去理解接下来的内容。

  仔细想一想,大致的思路如下:

  1.菜单是公共内容,我们放入App.vue组件中实现逻辑和页面布局,点击菜单栏的菜单名称使用<router-link>和<router-view>去显示产品列表。

  2.产品列表需要新建组件:Content.vue。该组件中编写产品列表的代码,点击产品名称展示产品详情使用<router-link>和<router-view>去显示产品详情。

  3.产品详情需要新建组件:ProductDetail.vue组件。该组件中,展示相应的产品详情。

  前面两篇VueRouter文章中的主要知识点就是url映射组件和动态路由,接下来我们结合前两篇VueRouter文章的知识点,按照这个思路去实现需求。

  感觉已经摩拳擦掌迫不及待想去实现这个小需求了 let's go go go

      《VueRouter爬坑第三篇》-嵌套路由

二.需求实现

1.菜单实现-App组件

E:\MyStudy\test\VueDemo\src\App.vue

<template>
<div id="app">
<!-- 菜单 -->
<ul>
<li v-for='(item,index) in menuList' v-bind:key='index' >
<router-link v-bind:to='item.url'>{{item.name}}</router-link>
</li>
</ul>
<!-- 内容区 -->
<router-view />
</div>
</template> <script>
export default {
name: 'App',
data() {
return {
menuList: [
{
url: '/index',
name: '首页'
},{
url: '/products',
name: '产品'
}
]
}
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
ul {
display: inline-block;
width: 100px;
border: 1px solid #ddd;
padding: 100px 0px 100px 20px;
position: fixed;
top: -10px;
bottom: 0px;
}
a{
text-decoration: none;
}
</style>  

  App组件主要就是三点:

    1.循环数据menuList展示菜单列表,并且每个菜单需要使用<router-link>添加链接

    2.使用<router-view>告诉vue-router把菜单链接匹配到的组件渲染到那个位置

    3.菜单的布局:使用fixed定位将菜单固定在浏览器左边,同时设置top和bottom使菜单垂直方向上铺满浏览器

  我们看下App组件的效果:

  《VueRouter爬坑第三篇》-嵌套路由

2.产品列表-Content组件

  我们需要新建一个组件来编写产品列表的代码:Content.vue

E:\MyStudy\test\VueDemo\src\components\Content.vue

<template>
<div class='productContent'>
<div class="productList">
<!-- 产品列表 -->
<h1>产品列表</h1>
<p v-for="(item,index) in productsList" v-bind:key='index'>
<router-link v-bind:to="item.url">{{item.name}}</router-link>
</p>
</div>
<!-- 产品详情 -->
<router-view />
</div>
</template>
<script>
export default {
name: 'Content',
data() {
return {
productsList: [
{
url: '/productDetail/1',
name: '产品1'
},{
url: '/productDetail/2',
name: '产品2'
}
]
}
} }
</script>
<style scoped>
.productContent{
margin-left: 150px;
}
.productList{
border:1px solid #ddd;
margin: 10px;
}
</style>

  Content组件主要就是三点:

    1.循环数据productsList展示产品列表,并且每个产品名称使用<router-link>添加链接

    2.使用<router-view>告诉vue-router把产品名称匹配到的组件渲染到哪个位置

    3.内容页的布局:需要设置左边距 margin-left:150px,这样就不会和菜单产生覆盖。

  接着我们配置菜单中的【产品】链接渲染到产品列表的路由。

E:\MyStudy\test\VueDemo\src\router\router.js

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router) // 引入路由需要映射的组件
import Content from '@/components/Content.vue'
const routes = [
{
path: '/products', // 具体的路由
component: Content // 路由映射的组件
},
] const router = new Router({
routes: routes
}) export default router

  现在在看下效果:

  《VueRouter爬坑第三篇》-嵌套路由

  可以看到点击菜单栏的【产品】已经可以成功的渲染出Content.vue组件并展示产品列表了。

3.产品详情-ProductDetail组件

  新建组件:ProductDetail.vue

E:\MyStudy\test\VueDemo\src\components\ProductDetail.vue

<template>
<div class='productDetail'>
<p>
名称:产品{{$route.params.id}}
</p>
<p>
详细信息:这是产品{{$route.params.id}}的详细信息......
</p>
</div>
</template>
<script>
export default {
name: 'ProductDetail',
} </script>
<style scoped>
.productDetail{
border:1px solid #ddd;
margin-left: 150px;
}
</style>

  产品详情组件比较简单,主要有下面几点:

  1.点击不同的产品名称需要渲染到产品详情组件,因此产品名称到产品详情的路由会采用动态路由去实现。

  2.使用了$route.parmas获取了动态路由中的参数并在模板中展示。

  接着就需要配置从产品名称到产品详情的动态路由了

E:\MyStudy\test\VueDemo\src\router\router.js

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router) // 引入路由需要映射的组件
import Content from '@/components/Content.vue'
import ProductDetail from '@/components/ProductDetail.vue'
const routes = [
{
path: '/products', // 具体的路由
component: Content, // 路由映射的组件
},
{
path: '/productDetail/:id', //这里使用了动态路由
component: ProductDetail // 路由映射的组件
}
] const router = new Router({
routes: routes
}) export default router

   代码完成,大概能想到的结果就是:当点击产品名称时,产品列表下方就会出现产品详情。

那么我怀着鸡冻的心情看下了结果:

  《VueRouter爬坑第三篇》-嵌套路由

  emmmmmm,跟我们想要的效果咋不一样:产品详情覆盖了产品列表。但是在Content.vue页面,我们明明使用<router-view>已经告知了产品详情组件应该渲染的位置。

    《VueRouter爬坑第三篇》-嵌套路由

  到这里呢,我们这节的主角嵌套路由就要登场了。

    《VueRouter爬坑第三篇》-嵌套路由

三.主角-嵌套路由

  在回到我们的需求和我们前面实现的代码,App组件、Content组件和ProductDetail组件这三者的关系是一层一层往下嵌套并且结合vue-router、router-view显示的:

   《VueRouter爬坑第三篇》-嵌套路由

  因为组件之间是这样嵌套的关系,所以对应路由也需要按照这个结构去嵌套。

   那路由嵌套呢,就是在单条路由配置中添加children选项,children选项就是和routes一样的路由配置数组,同时还支持多次的嵌套。

  话不多少,我们将产品详情这条路由嵌套到产品列表路由配置下。

  备注:App组件是根组件,所有的组件都是嵌套在该组件下的,默认路由也都是嵌套在根组件下。

E:\MyStudy\test\VueDemo\src\router\router.js

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router) // 引入路由需要映射的组件
import Content from '@/components/Content.vue'
import ProductDetail from '@/components/ProductDetail.vue'
const routes = [
{
path: '/products', // 具体的路由
component: Content, // 路由映射的组件
// 产品详情需要使用路由嵌套才能实现
children:[
{
path: '/productDetail/:id', //这里使用了动态路由
component: ProductDetail // 路由映射的组件
}
]
}
] const router = new Router({
routes: routes
}) export default router

  这里还需要把ProductDetail.vue组件中的界面布局修改一下:

.productDetail{
border:1px solid #ddd;
margin: 10px;
}

  现在就没啥问题了,我们在看下效果:

《VueRouter爬坑第三篇》-嵌套路由

  现在这个效果就是我们想要的效果了。是不是也很简单呢 hahahahaha

        《VueRouter爬坑第三篇》-嵌套路由

四.总结

  《VueRouter爬坑第三篇》-嵌套路由

1.是否需要使用嵌套路由是要根据组件之间是否存在嵌套关系。

2.路由嵌套就是在单条路由配置中添加children选项,children选项就是和routes一样的路由配置数组,同时还支持多次的嵌套。

  《VueRouter爬坑第三篇》-嵌套路由