多级路由

目录结构：

66f94eb3a94fb76f6aec01708e03724.png

使用

一级路由

/about 是路由文件中定义的path
 <router-link  to="/about" >About</router-link>

二级路由

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>

main.js

import Vue from 'vue'
import App from './App.vue'
// vue-router
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')

index.js(路由文件)

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

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

App.vue

<template>
  <div>
    <div class="row">
      <Banner />
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <router-link class="list-group-item" active-class="active" to="/about"
            >About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home"
            >Home</router-link>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Home from './components/Home'
// import About from './components/About.vue'
import Banner from './components/Banner.vue'

export default {
  name: 'App',
  components: { Banner },
}
</script>

Banner.vue

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
</template>

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

Home.vue

<template>
  <!-- <h2>我是Home的内容</h2> -->
  <div>
    <ul class="nav nav-tabs">
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/home/news"
          >News</router-link
        >
      </li>
      <li>
        <router-link
          class="list-group-item"
          active-class="active"
          to="/home/message"
          >Message</router-link
        >
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

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

About.vue

<template>
  <h2>我是About的内容</h2>
</template>

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

Message.vue

<template>
  <div>
    <ul>
      <li>message001</li>
      <li>message002</li>
      <li>message003</li>
    </ul>
  </div>
</template>

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

News.vue

<template>
  <div>
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  </div>
</template>

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