實現功能：製作一個登入頁面，跳轉到首頁，首頁包含選單欄、頂部導航欄、主體，標準的後臺網頁格式。選單欄點選不同選單控制主體展示不同的元件（不同的頁面）。
配置router-view巢狀跳轉需要準備兩個主要頁面，一個由app.vue跳轉的登入頁面（login.vue），一個由登入頁面（login.vue）跳轉首頁（index.vue）。另外還需要兩個用於選單跳轉頁面，頁面內容自定義
我這裡使用的是element-ui作為模板
- 建立登入頁面（login.vue）
- 建立後臺操作頁面（index.vue）
- 配置後臺操作頁面選單跳轉
- 配置巢狀路由檢視路由控制選單跳轉
1、修改app.vue頁面
app頁面只要放置一個router-view標籤即可，每一個路由請求預設都是從這裡進去跳轉
<template>
<div id="app">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'App',
methods: {
}
}
</script> <style>
</style>
2、建立登入頁面（/views/login/login.vue）
這裡的登入按鈕跳轉是直接跳轉到主頁面，當前登陸頁面將完全被替換掉
主頁面程式碼
<template>
<div id="login">
<el-form>
<el-row :gutter="20">
<el-col class="title" :offset="9" :span="6">
<h1>一個登入頁面</h1>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col class="col-label" :offset="7" :span="4">
<span class="label">賬號：</span>
</el-col>
<el-col :span="4">
<el-input type="text" placeholder="請輸入賬號" v-model="account.username"></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col class="col-label" :offset="7" :span="4">
<span class="label">密碼：</span>
</el-col>
<el-col :span="4">
<el-input type="password" placeholder="請輸入密碼" v-model="account.password"></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :offset="8" :span="8">
<span>
<a href="#" @click="register" >註冊賬號</a>
/
<a href="#" @click="resetPwd" >重置密碼</a>
</span>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :offset="10" :span="4">
<el-button type="primary" round @click="onSubmit">登入</el-button>
</el-col>
</el-row>
</el-form>
</div>
</template> <script>
export default {
name: 'login',
data() {
return {
account: {
username: '',
password: ''
}
}
},
methods: {
register() {
this.$message({
message: '好像沒這功能',
type: 'info'
})
},
resetPwd() {
this.$message({
message: '下輩子吧',
type: 'success'
})
},
onSubmit() {
this.$router.push('/index')
}
}
}
</script> <style scoped>
#login {
text-align: center;
margin: 0 auto;
}
.label {
height: 40px;
line-height: 40px;
}
.col-label {
text-align: right;
}
.el-row {
margin-top: 15px;
}
.el-button {
width: 120px;
}
.title {
margin-top: 10%;
}
</style>
2.1、在router/index.js中新增登入頁面路由
{
path: '/',
name: 'login',
component: () => import('../views/login/login.vue')
},
3、建立主頁面（/components/index.vue）
主頁面主要分為三塊，左側選單欄（el-menu），頂部導航欄（el-container），主體展示頁面（el-main），這部分是從elment-ui中的佈局容器例項拷貝過來的（https://element.eleme.cn/#/zh-CN/component/container）
<template>
<el-container style="border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1']" :router="true">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>導航一</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside> <el-container class="table-div">
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>檢視</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>刪除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header> <el-main>
<table></table>
</el-main>
</el-container>
</el-container>
</template> <style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
} .el-aside {
color: #333;
}
</style> <script>
export default {
name: 'index',
data() {
}
}
</script> <style>
.table-div {
width: 100%;
}
.el-table {
height: 100%;
}
</style>
2.1、建立主頁面路由
{
path: '/index',
name: 'index',
component: () => import('@components/index')
}
至此，由登入頁面跳轉到主頁面的操作配置就完成了。看看效果。啟動專案，訪問http://localhost:8080/#/
點選登入，跳轉到首頁
3、修改首頁，主要修改兩個部分，選單跳轉路徑，主體配置路由檢視
3.1、開啟選單路由模式，並修改選單跳轉路徑
在el-menu選單中開啟vue-router模式，並在el-menu-item標籤中的index配置要跳轉的頁面地址
3.2、新增router-view，直接將主體內容替換為router-view標籤，併為name屬性新增引數，我這使用table標識，這個很重要，路由需要根據這個name屬性指定跳轉的路由檢視
4、建立兩個子頁面（頁面可以在任意位置，只要路由地址配置正確即可）
我這建立了first-page.vue，first-table.vue（頁面內容自定義）
在router/index.js配置路由，在哪個頁面下增加的router-view元件，就在相應的路由配置中新增children，這裡是在index路由修改配置，新增children，配置path、name和components（這裡注意，如果只配置預設路由檢視跳轉，用的引數是component，配置多路由檢視跳轉時components）
{
path: '/index',
name: 'index',
component: () => import('@/components/index'), // 這裡配置首頁預設路由跳轉的頁面元件
children: [ // 新增子路由
{
path: 'page', // 注意點：路徑前面不要帶/，否則無法跳轉，在這裡吃過虧
name: 'page',
components: { // 注意引數名帶s
table: () => import('@/components/first-page') // 這裡的table跟首頁的router-view標籤的name一致，才會在首頁的路由檢視進行跳轉，看3.2
}
},
{
path: 'table',
name: 'table',
components: {
table: () => import('@/components/first-table')
}
}
]
}
這樣配置訪問地址為：localhost:8080/#/index/page、localhost:8080/#/index/table
到這裡配置完成，訪問頁面測試一下
可以看到，兩個選單配置改變了主體的路由檢視，控制檢視展示的頁面元件。配置完成