案例(模拟登陆退出)
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.重置按钮
template
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
methods
methods:{
reset(){
this.username ='',
this.password = ''
},
}
4.登录按钮
template
<button type="button" class="btn btn-primary" @click="login">登录</button>
methods
设定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.退出功能
template
<!-- 右侧按钮区域 -->
<div class="layout-header-right">
<button type="button" class="btn btn-light" @click="logout">退出登录</button>
</div>
methods
清空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>
methods
方法中使用拼接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
导入pathArr页面
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();
}
})
