Vue2项目实践十二：树形控件和路由权限

树形控件和路由获取：

<template>
  <div>
    <el-tree :data="menus" show-checkbox node-key="name" :props="defaultProps" ref="tree">
    </el-tree>
    <el-button @click="getCheckedNodes">通过node获取</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        label: 'name',
        children: 'children'

      }
    }
  },
  created() {
    this.menus = [...this.$router.options.routes]
    // console.log(this.$router.options.routes);
    

  },
  methods: {
    getCheckedNodes() {
      let arr = this.$refs.tree.getCheckedNodes()
      console.log(arr)


    }
  }
}
</script>

路由导航守卫：main.js

router.beforeEach((to,from,next) =>{
   if (!localStorage.getItem('username')) {
     if (to.path != '/login') {
       next('/login')
     } else next('/login')
   } next ()
 })

Vue打包Nginx部署

nginx 404和500报错,添加以下配置