Vue之路由的嵌套-蒲公英云

Vue之路由的嵌套

路由的嵌套在我的理解看来就是一个父路由里包含一个或多个子路由，实现其实很简单，重要的代码也就只有几行。下面我做的这个小例子就很容易理解。

在这里插入图片描述

点击“用户”跳转到上面第一个页面，点击“增加用户”跳转到上面第二个页面。（在跳转到第二个页面的时候，其余内容均保持不变）

1.那么，我们应该新建一个用户的组件

User.vue

<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div id="user">
        <div class="user">    
                    <div class="left">    
                        <ul>
                            <li>
                               <router-link to="/user/useradd"> 增加用户</router-link>
                            </li>
                            <li>
                                 <router-link to="/user/userlist"> 用户列表</router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="right">    
                         <router-view></router-view>
                    </div>
         </div>
    </div>
</template>  
<script>
export default { 
    data(){ 
        return { 
            msg:'我是一个user组件',
        }
    }
}
</script>

2.接下来，在components新建一个User文件夹，在其文件夹中新建UserAdd.vue 和UserList.vue

UserAdd.vue

<template>
    <div id="adduser">
        增加用户
    </div>   
</template>

UserList.vue

<template>
    <div id="userlist">
        用户列表
    </div>   
</template>

3.在main.js 中导入并配置路由（这是最重要的）

main.js(重点在第22到24行，第32行到39行)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource)
//导入并使用router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
import User from './components/User.vue';
  import UserAdd from './components/User/UserAdd.vue';
  import UserList from './components/User/UserList.vue';
//2.配置路由 注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  {  path: '/home', component: Home },
  {  path: '/news', component: News },
  {  path: '/content/:aid', component: Content },/* 动态路由*/
  {  path: '/pcontent', component: Pcontent },
  {  
    path: '/user', 
    component: User ,
    children:[
      {  path: 'useradd', component: UserAdd },
      {  path: 'userlist', component: UserList }
    ]
  },
  {  path: '*', redirect: '/home' }//默认跳转路由
]
//3.实例化VueRouter 注意，名字一定不能错
const router = new VueRouter({ 
  routes // （缩写）相当于 routes: routes
})
//4.挂载路由
/* eslint-disable no-new */
new Vue({ 
  el: '#app',
  router,
  components: {  App },
  template: '<App/>'
})
//5.根组件的模板里放上这句话 <router-view></router-view>

4.最后这是我的目录结构和App.vue,方便大家理解

在这里插入图片描述
App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-link to="/user">用户</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default { 
  name: 'App',
  data(){ 
    return{ 
      msg:'你好vue'
    }
  }
}
</script>
<style>
</style>