路由组件pages/AboutInfo.vue

<template>
   <div>
      <h1>我是About内容</h1>
   </div>
</template>

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

路由组件pages/HomeInfo.vue使用嵌套路由

<template>
   <div>
      <h1>我是Home内容</h1>
      <router-link to="/home/news">NewsInfo</router-link>&nbsp;&nbsp;
      <router-link to="/home/message">MessageInfo</router-link>
      <router-view></router-view>
   </div>
</template>

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

路由组件pages/MessageInfo.vue

<template>
    <div>我是MessageInfo组件内容</div>
</template>

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

路由组件pages/NewsInfo.vue

<template>
    <div>我是NewsInfo组件内容</div>
</template>

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

创建并暴露路由器router/index.js

import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
import NewsInfo from "../pages/NewsInfo"
import MessageInfo from "../pages/MessageInfo"

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path: "/about",
            component: AboutInfo
        },
        {
            path: "/home",
            component: HomeInfo,
            children:[
                {
                    path: "news",
                    component: NewsInfo
                },
                {
                    path: "message",
                    component: MessageInfo
                }
            ]
        }
    ]
})

引入并配置路由器main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
//引入路由器
import router from "./router"

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

App.vue

<template>
    <div>
        <router-link to="/about">About</router-link>&nbsp;&nbsp;
        <router-link to="/home">Home</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    name: "App",
}
</script>

运行效果：