[Vue]嵌套(多级)路由

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. 静态页面
2. 组件的拆分
2.1 目录结构
2.2 组件

3. 嵌套路由的配置
4. 总结嵌套(多级)路由

1. 静态页面

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue Apptitle>
  <link rel="stylesheet" href="./css/bootstrap.css">
head>
<body>
<div id="root">
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demoh2>div>
      div>
    div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <a class="list-group-item" href="/about">Abouta>
          <a class="list-group-item active"href="/home" aria-current="page">Homea>
        div>
      div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <div>
              <h2>Home组件内容h2>
              <div>
                <ul class="nav nav-tabs">
                  <li>
                    <a class="list-group-item" href="./home-news.html">Newsa>
                  li>
                  <li>
                    <a class="list-group-item active" href="./home-message.html">Messagea>
                  li>
                ul>
                <div>
                  <ul>
                    <li>
                      <a href="/message1">message001a>  
                    li>
                    <li>
                      <a href="/message2">message002a>  
                    li>
                    <li>
                      <a href="/message/3">message003a>  
                    li>
                  ul>
                div>
              div>
            div>
          div>
        div>
      div>
    div>
  div>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

2. 组件的拆分

2.1 目录结构

在这里插入图片描述

2.2 组件

Home.vue

<template>
  <div>
    <h2>Home组件h2>
    <ul class="nav nav-tabs">
      <li>
        <a class="list-group-item" href="./home-news.html">Newsa>
      li>
      <li>
        <a class="list-group-item active" href="./home-message.html">Messagea>
      li>
    ul>
    <div>
      ???????????
    div>
  div>
template>

<script>
export default {
  name: 'Home'
}
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Message.vue

<template>
  <div>
    <ul>
      <li>
        <a href="/message1">message001a>  
      li>
      <li>
        <a href="/message2">message002a>  
      li>
      <li>
        <a href="/message/3">message003a>  
      li>
    ul>
  div>
template>

<script>
export default {
  name: 'Message'
}
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

News.vue

<template>
  <div>
    <ul>
      <li>news001li>
      <li>news002li>
      <li>news003li>
    ul>
  div>
template>

<script>
export default {
  name: 'News'
}
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

About.vue

<template>
  <div>
    <h2>About组件h2>
  div>
template>

<script>
export default {
  name: 'About'
}
script>

<style>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 嵌套路由的配置

子路由写在父级路由的 children 配置项相中，在子路由中路径不用写 / 。

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      // Home下的子路由
      children: [
        { path: 'news', component: News },
        { path: 'message', component: Message }
      ]
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在页面中路由进行跳转时，路径需要书写完整。即/父级路由路径/子路由路径

Home.vue

<template>
  <div>
    <h2>Home组件h2>
    <ul class="nav nav-tabs">
      <li>
        
        <router-link class="list-group-item" active-class="active" to="/home/news">Newsrouter-link>
      li>
      <li>
        
        <router-link class="list-group-item" active-class="active" to="/home/message">Messagerouter-link>
      li>
    ul>
    <div>
      
      <router-view>router-view>
    div>
  div>
template>

<script>
export default {
  name: 'Home'
}
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4. 总结嵌套(多级)路由

配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

跳转（要写完整路径）：
```
News
1
```

相关阅读:
web批量导入(包括文本和图片)
新版 Next.js 从入门到入土
 [ROS 系列学习教程] 建模与仿真 - 使用 Arbotix 控制机器人
 适用于WPF的设计模式
 Gitlab用户角色权限Guest、Reporter、Developer、Master、Owner
详解浏览器HTTP强、协商缓存
 【JavaWeb】jsp
驱动开发-按键中断
 mysql 在eclipse在配置
 MongoDB（一） windows 和 linux 之 Ubuntu 安装
原文地址：https://blog.csdn.net/m0_53022813/article/details/127460904

[Vue]嵌套(多级)路由

前言

文章目录

1. 静态页面

2. 组件的拆分

2.1 目录结构

2.2 组件

3. 嵌套路由的配置

4. 总结 嵌套(多级)路由

4. 总结嵌套(多级)路由