image.png

步驟：
1、創(chuàng)建一個(gè)父路由對應(yīng)的組件User.vue。
2、創(chuàng)建兩個(gè)子路由對應(yīng)的組件UserInfo.vue、UserList.vue。
3、在main.js中引入U(xiǎn)ser.vue、UserInfo.vue、UserList.vue三個(gè)模塊：

image.png

4、在main.js中創(chuàng)建子路由：

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實(shí)例
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},//默認(rèn)跳轉(zhuǎn)路由
{path:'/shop/:id',component:Shop},//動(dòng)態(tài)路由法
{path:'/detail',component:Detail},//Get傳值法
]
const router = new VueRouter({
// mode:'history',//將哈希模式（http://localhost:8080/#/news）改為history模式（http://localhost:8080/news）
routes//(或?qū)懗蓃outes: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{
///左側(cè)固定寬度/
width:200px;
min-height:500px;
border-right:1px solid #ccc;
font-size: 1.5rem;
}
.right{
///右側(cè)自適應(yīng)/
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>