1、主页面
<template>
<div class="home">
<div><h1>管理主页</h1></div>
<div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="商家列表" name="first"></el-tab-pane>
<el-tab-pane label="产品列表" name="second"></el-tab-pane>
<el-tab-pane label="重置密码" name="third"></el-tab-pane>
<el-tab-pane label="管理员列表" name="fourth"></el-tab-pane>
</el-tabs>
</div>
<div>
<router-view/>
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'Home',
data() {
return {
user: null,
activeName: 'first',
}
},
mounted() {
let token = window.sessionStorage.getItem('token')
if(token == null) {
this.$router.push('/login')
return
}
// 保存当前登录用户信息
this.user = window.sessionStorage.getItem('user')
},
methods: {
handleClick(tab, event) {
console.log(this.activeName, tab, event);
if(this.activeName == 'first') {
this.$router.push('/index/seller')
}
else if(this.activeName == 'second') {
console.log('second');
this.$router.push('/index/product')
}
else if(this.activeName == 'third') {
console.log('third');
this.$router.push('/index/reset')
}
else if(this.activeName == 'fourth') {
console.log('second');
this.$router.push('/index/admin')
}
}
}
}
</script>
2、子页面
<template>
<div>
<h3>admin list</h3>
</div>
</template>
<script>
</script>
<style>
</style>
<template>
<div>
<div><h3>reset password</h3></div>
</div>
</template>
<script>
</script>
<style>
</style>
3、路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
},
{
path: '/index',
name: 'Index',
component: Home,
children: [
{
path: 'seller',
component: () => import('../views/SellerList.vue')
},
{
path: 'admin',
component: () => import('../views/AdminList.vue')
},
{
path: 'product',
component: () => import('../views/ProductList.vue')
},
{
path: 'reset',
component: () => import('../views/ResetPass.vue')
},
]
},
]
const router = new VueRouter({
routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next)=>{
console.log("to="+to.path)
console.log("from="+from.path)
// to 要访问的路径
// from 从哪个页面而来
// next 是一个函数,表示放行
// next() 放行, next('/Login')强制跳转
// if(to.path === '/login') return next()
// if(to.path === '/regist') return next()
// 获取登录的状态
// let token = window.sessionStorage.getItem("token")
// if(!token) {
// return next({path:'/login'})
// }
next()
})
export default router
4、文档结构