Vue系列vue-router的嵌套使用（四）

前言

我们希望点击导航栏不同菜单时，导航栏下方加载不同的组件，进而展示不同的页面内容，下面我们来模拟一下这个场景

一、编写两个路由子页面

Welcome页面相当于导航下方的菜单，菜单下面的两个子页面，相当于，不同的子菜单链接页面。

二、配置路由规则

代码：

{
    path: '/welcome',
    component: Welcome,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
        component: WelcomeNews
      },
      {
        path: 'message',
        component: WelcomeMessage
      }
    ]
  },

三、编写Welcome父页面

代码：

<template>
    <div>
        <h1>网站欢迎页-Hello word</h1>
        <!--子路由 to="welcome/news" 写上完整路径-->
        <router-link to="/welcome/news">新闻</router-link>
        <router-link to="/welcome/message">消息</router-link>
        <!--路由占位符-->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Welcome"
    }
</script>

<style scoped>

</style>

四、效果测试

输入地址：http://localhost:8080/ 默认跳转到 http://localhost:8080/welcome/news

切换到消息页面：