vue-创建管理系统

        使用路由创建了管理系统，但是在判断是否登录的时候登录界面居然显示在了里，后来使用了子路由，重新使用一个界面来调用路由就ok了，主要想法是： 进入系统-判断是否已经登录，如果登录进入子路由给的后台左右界面；如果没有登录，进入登录界面

如下界面，主要用到的有app.vue（其实它啥也没变，保持最初的样子就好），router.js和components下我新建的一个Index.vue

路由index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Admin from '@/components/Admin'
import Index from '@/components/Index'
import User from '@/components/User'
import Login from '@/components/Login'
import Register from '@/components/Register'
import EditUser from '@/components/EditUser'
import Vefr from '@/components/Vefr'
import VefrPrice from '@/components/VefrPrice'
import store from '@/store/index'

Vue.use(Router)

// export default new Router({
const router = new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/',
            name: 'index',
            component: Index,
            children:[
                {
                    path: '/admin',
                    name: 'admin',
                    component: Admin,
                    meta: {
                        // 表示进入该页面需要登录
                        requireAuth: true
                    }
                },
                {
                    path: '/register',
                    name: 'register',
                    component: Register
                },
                {
                    path: '/user',
                    name: 'user',
                    component: User,
                    meta: {
                        requireAuth: true
                    }
                },
                {
                    path: '/edituser',
                    name: 'edituser',
                    component: EditUser,
                    meta: {
                        requireAuth: true
                    }
                },
                {
                    path: '/vefr',
                    name: 'vefr',
                    component: Vefr,
                    meta: {
                        requireAuth: true
                    }
                },
                {
                    path: '/vefrprice',
                    name: 'vefrprice',
                    component: VefrPrice,
                    meta: {
                        requireAuth: true
                    }
                },
            ],
            meta: {
                // 表示进入该页面需要登录
                requireAuth: true
            }

        },


    ],
})

// 注册全局钩子来拦截导航
router.beforeEach((to, from, next) => {
    const token = store.state.token
    if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
        if (token) { // 通过vuex state获取当前的token是否存在
            next({
                path: '/'
            })
        } else {
            // console.log('该页面需要登陆')
            next({
                path: '/login'
                // query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    } else {
        next()
    }
})
export default router

Index.vue界面入下：