〖Vue〗必备小知识- 子路由即嵌套路由的使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们简单学习了 Vue-Router 的初步使用, 及实现. 今天来具体学习一下 Vue 项目小实战之页面切换的子路由: 路由 Vue-Router子路由的使用

Vue-Router 前端路由 的具体使用

官方文档: Vue-Router 子路由 即嵌套路由: https://router.vuejs.org

前端路由: 根据不同的 hash 值，切换不同的模板组件

后端路由 根据不同的 url 返回不同的内容

子路由的使用 children

子路由即 嵌套路由, 我们的实际项目往往是由很多个页面组成的, 而且往往是由各种嵌套(即页面内的各个链接进行跳转不同的业务页面).

// src/router/index.js 路由定义模块 -- 子路由的定义

import Vue from 'vue'
import Router from 'vue-router'
import One from '@/components/One'
import One1 from '@/components/One1'
import One2 from '@/components/One2'
import Two from '@/components/Two'
import Three from '@/components/Three'
import NotFound from '@/components/NotFound'

Vue.use(Router)

export default new Router({
  mode: 'history',

  routes: [
    {
      path: '/',
      redirect: { name: 'One' }, // 重定向到name为 One 的路由
    },
    {
      path: '/page-one',
      name: 'One',
      component: One,
      children: [
        // 子路由的定义
        {
          path: '/page-one/one1',
          component: One1,
        },
        {
          path: '/page-one/one2',
          component: One2,
        },
      ],
    },
    {
      path: '/page-two',
      name: 'Two',
      component: Two,
    },
    {
      path: '/page-three',
      component: Three,
    },
    {
      path: '**',
      component: NotFound, // 404页面该如何做, 找不到页面定义到notfound404页面
    },
  ],
})

路由定义好后, 我们在页面中进行访问 相应的路由

// page-one.vue

<template>
  <div id="app">
    <!-- 下面的exact精确匹配的时候, 定义的样式才会生效 -->
    <router-link to="/page-one" exact>page-one</router-link>
    <router-link to="/page-one/one1">page-one/one1</router-link>
    <router-link to="/page-one/one2">page-one/one2</router-link>
    <router-view /> 
    <!-- 这里的router-view 是最顶层入口, 用来渲染最高级路由匹配到的组件 -->
  </div>
</template>