- 前置準備
router/index.js設定路由規則
導入Login與Home
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'
const router = new VueRouter({
// 登陸的路由規則
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
// 背景首頁的路由規則
{ path: '/home', component: Home }
]
})
- 背景首頁基礎布局
index.js路由規則
導入頁面
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'
設定規則
const router = new VueRouter({
// 登陸的路由規則
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
// 背景首頁的路由規則
{path: '/home',component:Home,}
]
})
- 頁面布局
MyHome.vue
導入元件
// 頭部區域元件
import MyHeader from "./subcomponents/MyHeader.vue"
// 左側邊欄元件
import MyAside from "./subcomponents/MyAside.vue"
注冊
// 注冊元件
components: {
MyHeader,
MyAside,
},
template
<template>
<div class="home-container">
<!-- 頭部區域 -->
<MyHeader></MyHeader>
<!-- 頁面主題區域 -->
<div class="home-main-box">
<!-- 左則邊欄 -->
<MyAside></MyAside>
<!-- 右側邊欄主體區域 -->
<div class="home-main-body">
<router-view></router-view>
</div>
</div>
</div>
</template>
css
<style scoped>
.home-container {
height: 100%;
display: flex;
flex-direction: column;
}
.home-main-box {
height: 100%;
display: flex;
}
.home-main-box .home-main-body {
padding: 15px;
flex: 1;
}
</style>
- MyLogin.vue頁面
因為沒有背景資料,這裡模拟賬号密碼
- data中定義username和password
data(){
return{
username:'',
password:''
}
},
2.表單雙向資料綁定
v-model
//登入
<div class="form-group form-inline">
<label for="username">登入名稱</label>
<input
type="text"
class="form-control ml-2"
id="username"
placeholder="請輸入登入名稱"
autocomplete="off"
v-model.trim="username"
/>
</div>
//密碼
<div class="form-group form-inline">
<label for="password">登入密碼</label>
<input
type="password"
class="form-control ml-2"
id="password"
placeholder="請輸入登入密碼"
v-model.trim="password"
/>
</div>
3.重置按鈕
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
methods
methods:{
reset(){
this.username ='',
this.password = ''
},
}
4.登入按鈕
<button type="button" class="btn btn-primary" @click="login">登入</button>
設定token值等登陸操作
login(){
if(this.username == 'admin' && this.password == '123456'){
localStorage.setItem('token','Bearer xj')
this.$router.push('/home')
}else{
localStorage.removeItem('token')
}
}
-
index.js路由頁
1.設定導航守衛
當登陸後會跳轉到home頁面,這裡做token驗證,成功放行,失敗則傳回login登陸頁面
router.beforeEach(function (to, from, next) { if (to.path == '/home') { const token = localStorage.getItem('token'); if (token) { next() } else { next('/login') } } else { next(); } })
- MyHeader.vue頁面
1.退出功能
<!-- 右側按鈕區域 -->
<div class="layout-header-right">
<button type="button" class="btn btn-light" @click="logout">登出</button>
</div>
清空token值,并跳轉至登入頁
methods:{
logout(){
// 1.清空token
localStorage.removeItem('token')
// 2.跳轉到登入頁
this.$router.push('/login')
}
}
- 實作子路由嵌套顯示
MyAside.vue
<div class="layout-aside-container">
<!-- 左側邊欄清單 -->
<ul class="user-select-none menu">
<li class="menu-item">
<router-link to="/home/users">使用者管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/rights">權限管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/goods">商品管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/orders">訂單管理</router-link>
</li>
<li class="menu-item">
<router-link to="/home/settings">系統設定</router-link>
</li>
</ul>
</div>
MyHome.vue設定路由占位符
右側邊欄主體區域
<template>
<div class="home-container">
<!-- 頭部區域 -->
<MyHeader></MyHeader>
<!-- 頁面主題區域 -->
<div class="home-main-box">
<!-- 左則邊欄 -->
<MyAside></MyAside>
<!-- 右側邊欄主體區域 -->
<div class="home-main-body">
<router-view></router-view>
</div>
</div>
</div>
</template>
index.js設定右側邊欄子路由規則
{
path: '/home',
component:Home,
redirect:'/home/users',
children: [
{ path: 'users', component: Users },
{ path: 'rights', component: Rights },
{ path: 'goods', component: Goods },
{ path: 'order', component: Order },
{ path: 'settings', component: Settings },
]
}
-
循環渲染使用者資訊
MyUsers.vue
<tr v-for="item in userlist" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.position}}</td> <td> 詳情 </td> </tr>
-
添加使用者點選進入詳情頁面
點選事件傳參(item.id)
@click.prevent="gotoDetail(item.id)
-
<tr v-for="item in userlist" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.position}}</td>
<td>
<a href="#" @click.prevent="gotoDetail(item.id)">詳情</a>
</td>
</tr>
方法中使用拼接id
methods:{
gotoDetail(id){
this.$router.push('/home/userinfo/'+id)
}
}
index.js定義路由規則
導入詳情頁
import UserDetail from '@/components/user/MyUserDetail.vue'
路由開啟props傳參
路由規則中試用:id
{
path: '/home',
component:Home,
redirect:'/home/users',
children: [
{ path:'userinfo/:id',component:UserDetail,props:true}, ]
}
MyuserDetail.vue
props接收參數
<template>
<div>
<button type="button" class="btn btn-light btn-sm" @click="$router.back()">後退</button>
<h4 class="text-center">使用者詳情---{{id}}</h4>
</div>
</template>
<script>
export default {
name: 'MyUserDetail',
props:['id']
}
</script>
<style lang="less" scoped></style>
- 導航守衛添加頁面無token攔截
添加pathArr.js 并導出頁面
export default ['/home','/home/users','/home/rights']
router/index.js
import PathArr from '@/router/pathArr.js'
// 全局前置守衛
router.beforeEach(function (to, from, next) {
if (PathArr.indexOf(to.path)!==-1) {
const token = localStorage.getItem('token');
if (token) {
next()
} else {
next('/login')
}
} else {
next();
}
})