嵌套路由使用--学习笔记

                                                       嵌套路由

1、嵌套路由，简单理解，就是在一个路由组件中定义另一个路由

2、实现案例截图

3、实现思路

（1）搭建好一个主路由，主要是配置好了相关的一些配置。具体案例实现如:进入请点击

（2）定义路由组件；

（3）注册路由；

（4）使用路由；

4、实现过程

（1）先按照案例配置好相关配置，过程如：进入请点击；

（2）在目录src\views\Home下，定义相关路由组件 News.vue 和 Message.vue

News.vue

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

<script>
export default {
  data () {
      return {
        newsArr: ['news001', 'news002', 'news003', 'news004']
      }
  }
}
</script>

<style>

</style>

Message.vue

<template>
  <div>
      <ul>
          <li v-for="(message, index) in messages" :key="index">
              <a href="???">{{message.title}}</a>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
      return {
        messages: []
      }
  },

  mounted () {
      //模拟ajax请求从后台获取数据
      setTimeout(() => {
          const messages = [
              {
                  id: 1,
                  title: 'message001'
              },
              {
                  id: 3,
                  title: 'message003'
              },
              {
                  id: 5,
                  title: 'message005'
              }
          ]
          this.messages = messages
      }, 1000)
  }
}
</script>

<style>

</style>

（3）注册路由

在文件src\router\index.js中，添加嵌套路由的相关信息

 代码如下：

/* 路由器模块 */
import Vue from 'vue'
import VueRouter from 'vue-router'
/* 引入路由组件 */
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/Home/News.vue'
import Message from '../views/Home/Message.vue'

Vue.use(VueRouter)

export default new VueRouter({
    /*n个路由 */
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    // path: '/news',  //path最左侧的/永远代表根路由，这样写不对
                    path: '/home/news',    //第一种写法，推荐
                    component: News
                },
                {
                    path: 'message',      //第二种写法，简化写法
                    component: Message
                },
                {
                    path: '',
                    redirect: '/home/news'
                }
            ]
        },
        /*当访问 ‘ http://localhost:8090/ ’时，重定向到about页面*/
        {
            path: '/',
            redirect: '/about'
        }
    ]
})

（4）使用路由

在文件src\views\Home.vue下，使用路由

<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link to="/home/news">News</router-link>
        </li>
        <li>
          <router-link to="/home/message">Message</router-link>
        </li>
      </ul>
      <div>
        <router-view></router-view>
        <hr/>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

（5）在终端运行命令 npm run dev , 开启访问即可