image.png

步骤：
1、创建一个父路由对应的组件User.vue。
2、创建两个子路由对应的组件UserInfo.vue、UserList.vue。
3、在main.js中引入User.vue、UserInfo.vue、UserList.vue三个模块：

image.png

4、在main.js中创建子路由：

image.png

5、在User.vue中引入：

image.png

源码：
main.js:
// 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'//引入vue实例
import App from './App'
import VueRouter from 'vue-router'
//引入全局css样式
import './assets/css/basic.scss'
import VueResource from 'Vue-resource'
//从'Vue-resource'中引入模块，并命名为'VueResource'
Vue.config.productionTip = false;
Vue.use(VueResource);//官方插件都这样用
Vue.use(VueRouter);

import Home from './components/Home.vue';
import Shop from './components/Shop.vue';
import News from './components/News.vue';
import Detail from './components/detail.vue';
import User from './components/User.vue';
import UserInfo from './components/UserInfo.vue';
import UserList from './components/UserList.vue';

const routes=[
{path:'/home',component:Home},
{path:'/user',
component:User,
children:[
{path:'userinfo',component:UserInfo},
{path:'userlist',component:UserList},
]
},
{path:'/news',component:News,name:'news'},
{path:'*',component:Home},//默认跳转路由
{path:'/shop/:id',component:Shop},//动态路由法
{path:'/detail',component:Detail},//Get传值法
]
const router = new VueRouter({
// mode:'history',//将哈希模式（http://localhost:8080/#/news）改为history模式（http://localhost:8080/news）
routes//(或写成routes:routes)
})
new Vue({
el: '#app',
//6、挂载router
router,
components: { App },
template: '<App/>'
})

//7、将路由出口：<router-view></router-view>放在App.vue中

User.vue:
<template>
<div id="user">
<div class="left">
<ul>

<li><router-link to="/user/userinfo">用户信息</router-link></li>
<li><router-link to="/user/userlist">用户列表</router-link></li>
</ul>
</div>
<div class="right">

<router-view></router-view>
</div>
</div>
</template>

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

<style scoped lang="scss">

user{

display: flex;
.left{
///左侧固定宽度/
width:200px;
min-height:500px;
border-right:1px solid #ccc;
font-size: 1.5rem;
}
.right{
///右侧自适应/
flex:1;
}
}
</style>

App.vue:


<template>
<div id="app">
<header class="header">
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/user">用户</router-link>
</header>

<router-view></router-view>
</div>
</template>

<script>

export default {
name: 'App',
data (){
return{
msg:'你好！',
}
},
methods:{

},

}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}

app .header{

height:4.4rem;
width:100%;
background: #000;
color:#fff;
line-height: 4.4rem;
text-align: center;
font-size: 2rem;
}

app .header a{

color:#fff;
}
</style>

UserList.vue:

<template>
<div>
<h2>用户列表</h2>
</div>
</template>

<script>
export default {
name: "user-list"
}
</script>

<style scoped>

</style>

UserInfo.vue

<template>
<div>
<h2>用户信息</h2>
</div>
</template>

<script>
export default {
name: "user-info"
}
</script>

<style scoped>

</style>