Vue核心技术-37,vue-router-嵌套路由

一,前言

上一篇介绍了vue-router的配置和简单使用
这一篇介绍嵌套路由的实现

本篇实例基于上一篇的代码,注释部分将移除于本篇无关的注释,如有疑问请参看之前文章

上文说,添加一个路由组件分3步
1,定义路由组件
2,在router中注册路由
3,使用路由:在调用组件中写跳转和显示

下面就按照这三步,添加嵌套路由

---

二,嵌套路由和效果

嵌套路由也称作子路由,是在上一级下的子级路由,形成嵌套关系
在上一篇代码的基础上,在商品页面添加两个子路由,
这两个子路由从属于商品页面,分别为新闻和商品列表

为了便于理解,先贴出效果图:

可以看到两个子路由分别为:
http://localhost:8080/#/product/news
http://localhost:8080/#/product/productList

---

三,第一步,定义路由组件

News.vue

<template>
  <div>
    <ul>
      <li v-for="(news, index) in newsList" :key="index">
        {{news}}
      li>
    ul>
  div>
template>

<script>
  export default {
    data: function () {
      return {
        newsList:[
          '科技类图示满100-50',
          '社科类图书满100-50',
          '经管类图书满100-50'
        ]
      }
    }
  }
script>

<style>

style>

ProductList.vue

<template>
  <div>
    <ul>
      <li v-for="(product, index) in productList" :key="product.id">
        书名:{{product.name}}
      li>
    ul>
  div>
template>

<script>
  export default {
    data: function () {
      return{
        productList:[]
      }
    },
    mounted: function () {
      //模拟请求
      setTimeout(() => {
        const list = [
          {
            id:1,
            name: 'Vue实战'
          },
          {
            id:2,
            name: 'Vue.js权威指南'
          },
          {
            id:3,
            name: 'Vue.js前端开发'
          },
          {
            id:4,
            name: 'Vue2实践揭秘'
          },
          {
            id:5,
            name: 'Vue移动开发实战技巧'
          }
        ]

        this.productList = list;
      }, 1000);
    }
  }
script>

<style>

style>

这两个组件都非常简单,就不做赘述了
ProductList商品列表组件,使用了定时器模拟异步请求返回数据

---

四,第一步,注册路由

src/router/index.js

/*
 *  路由器对象模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Product from '../pages/Product.vue'
import Home from '../pages/Home.vue'
// 引入路由组件
import News from '../pages/News.vue'
import ProductList from '../pages/ProductList.vue'

Vue.use(VueRouter)

export default new VueRouter ({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/product',
      component: Product,
      // 嵌套路由
      children: [
        {
          // 写法一:全路径
          path: '/product/news',
          component: News
        },
        {
          // 写法二:继承式
          path: 'productList',    // 简写,同/product/productList
          component: ProductList,
        },
        {
          // 默认重定向
          path: '',
          redirect: '/product/news'
        }
      ]
    },
    {
      path: '/',
      redirect: '/home'
    }
  ]
})

路由配置中提供了children来定义嵌套路由,嵌套路由中的路由对象和外层一直
子路由的路径有两种方式:全路径和继承式,同时也支持重定向

---

五,第三部,使用路由

在调用组件中写跳转和显示
新增的路由组件所属于商品路由组件,
所以修改商品路由组件,添加对应的跳转和显示

<template>
  <div>
    <div>
      <h2>商品页面h2>
    div>

    <div>
      <ul class="nav nav-tabs">
        <li><router-link to="/product/news">新闻router-link>li>
        <li><router-link to="/product/productList">商品列表router-link>li>
      ul>
      
      <router-view>router-view>
    div>
  div>
template>

<script>

script>

<style>

style>

---

六,结尾

嵌套路由的是不是非常简单,下一篇介绍路由组件的缓存