vue2路由和vue组件动态控制

关注微信公众号：新手程序员教程，领取vue2和vue3的全套笔记！！！！

（1）路由的注册

[1]router/index.js

// (1)导入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'

// (5)导入需要路由切换转的组件
import Login from '@/views/back/login/Login'
import Register from '@/views/back/login/Register'
import Vue404 from '@/views/back/Vue404'
import Person from '@/views/back/person/Person'

// (2)调用Vue.use( )函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// (3)创建路由的实例对象
const routes = [// 在routes 数组中，声明路由的匹配规则
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/404', component: Vue404 }
  
]

const router = new VueRouter({ // 创建路由的实例对象
  routes
})

// 提供一个重置路由的方法:由vueX中store文件加下的index.js调用
export const resetRouter = () => {
  router.matcher = new VueRouter({
    routes
  })
}

// 注意：刷新页面会导致页面路由的重置
export const setRoutes = () => {
  const storeMenus = localStorage.getItem('menus')
  if (storeMenus) {
    // 获取当前的路由对象名称数组
    const currentRouterNames = router.getRoutes().map(v => v.name)
    if (!currentRouterNames.includes('Manage')) {
      // 拼装动态路由
      const manageRoute = {
        path: '/manage',
        name: 'Manage',
        component: () => import('@/views/back/Manage.vue'),
        redirect: '/manage/home',
        children: [
          { path: 'person', component: Person, name: '个人介绍' }
        ]
      }
      const menus = JSON.parse(storeMenus)
      // console.log(storeMenus)
      menus.forEach(item => {
        if (item.path) { // 当且仅当path不为空的时候才去设置路由
          const itemMenu = { path: item.path.replace('/', ''), name: item.name, component: () => import('@/views/' + item.pagePath + '.vue') }
          manageRoute.children.push(itemMenu)
        } else if (item.children.length) {
          item.children.forEach(item => {
            if (item.path) {
              const itemMenu = { path: item.path.replace('/', ''), name: item.name, component: () => import('@/views/' + item.pagePath + '.vue') }
              manageRoute.children.push(itemMenu)
            }
          })
        }// else
      })
      // 动态添加到现在的路由对象中去
      router.addRoute(manageRoute)
    }
  }// if
}
// 重置路由
setRoutes()

// 路由守卫
router.beforeEach((to, from, next) => {
  next() // 放行路由
})

// (4)向外共享路由的实例对象
export default router

[2]vueX

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import router, { resetRouter } from '@/router'

Vue.use(Vuex)

const index = new Vuex.Store({
  mutations: {
    logout () {
      // 清空缓存
      localStorage.removeItem('user')
      localStorage.removeItem('menus')
      router.push('/login')
      // 重置路由
      // eslint-disable-next-line no-undef
      resetRouter()
    }
  }
})

export default index

[3]vue的views下的组件视图

Login.vue

 methods: {
    login () {
      this.$refs.userForm.validate((valid) => {
        if (valid) { // 表单校验合法
          this.request.post('/back/user/login', this.user).then(res => {
            if (res.data.status === this.config.success) {
              localStorage.setItem('user', JSON.stringify(res.data.data)) // 存储用户信息到浏览器
              localStorage.setItem('menus', JSON.stringify(res.data.data.menuList))
              // 设置路由来自router
              setRoutes()
              this.$message.success(res.data.msg)
              this.$router.replace('/manage/home')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          return false
        }
      })
    }

(2)vue组件的动态渲染(利用for循环)

[1]在components/Aside.vue

 <div v-for="item in menus" :key="item.id">
      <div v-if="item.path">
            <el-menu-item :index="'/manage'+item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{
   
   {item.name}}</span>
              </template>
            </el-menu-item>
      </div>
      <div v-else-if="item.children">
        <el-submenu :index="''+item.id">
              <template slot="title">
                <i :class="item.idon"></i>
                <span slot="title">{
   
   {item.name}}</span>
              </template>
          <div v-for="son in item.children" :key="son.id">
            <el-menu-item :index="'/manage'+son.path"  v-if="item.id==son.pid">
              <i :class="son.icon"></i>
              <span slot="title">{
   
   {son.name}}</span>
            </el-menu-item>
          </div>
        </el-submenu>
      </div>

    </div>

[2]后端传到前端的数据结构为: