vue 动态路由实现 笔记。含使用vuex

https://www.bilibili.com/video/BV1FL411J7aa?spm_id_from=333.337.search-card.all.click

目录

main 启动文件

utils/data     路由的数据

route/route     路由套件

store/index     vuex数据操作相关

testroute/ 1、2、3～     html页面

utils/loaddingRouter     动态路由操作的逻辑

大概思路

main 启动文件

import Vue from 'vue'
import App from './App.vue'
import {router} from "./route/route.js"        -----这个
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
import axios from 'axios'
import Layout from "ant-design-vue/lib/layout";
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
import bbbb from '../src/store/index';


Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(Layout).use(antd)
Vue.use(ElementUI);
// Vue.prototype.request2 = request2


new Vue({
  router,     ---这个
  store: bbbb,
  render: h => h(App),
}).$mount('#app')

utils/data     路由的数据

// 静态路由
export const staicRouter = [
    {path: '/1', meta:{title:1},component: () => import('../testroute/1.vue'), name: '1' },
    {path: '/2', meta:{title:2},component: () => import('../testroute/2.vue'), name: '2' },
    {path: '/3', meta:{title:3},component: () => import('../testroute/3.vue'), name: '3' },
    //前端判断hidden看是否需要展示
    {path: '*', redirect:'/1',meta:{title:"错误",hidden: true},component: () => import('../testroute/3.vue'), name: '3' },
  ]
  
//模拟动态路由
export const dyamicRouter = [
    {path: '/4', meta:{title:4},component: () => import('../testroute/4.vue'), name: '2' },
    {path: '/5', meta:{title:5},component: () => import('../testroute/5.vue'), name: '3' },
  ]

 

route/route     路由套件

import Vue from 'vue'
import VueRouter from "vue-router"

Vue.use(VueRouter)

import {staicRouter} from "../utils/data"  //引入静态路由
const routers =staicRouter;   //静态路由保存

const createRouter = () => new VueRouter({  //创建路由
    mode: "history"
})

export const router = createRouter()
export function resetRouter() {
    const newRouter = createRouter();
    router.matcher = newRouter.matcher;
}

store/index     vuex数据操作相关

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//数据存放
const state={
    is: false, //判断是否登录
    routerArr: [],
    count:11
  }

//改变数据的逻辑方法 类似spring的mapper层
const mutations={
    //点击了登录退出
    CHANGESTORE(state,bool){
        state.is=bool
    },
    // 存放路由
    HEARDER(state,data){
        state.routerArr=data
    },
  }

//调用方法操作数据   ---类似spring的service层
const actions={
    updateStoreChange(context,state){
        context.commit('CHANGESTORE',state)
    },
    Nav(context,state){
        context.commit('HEARDER',state)

    }
  }

  //获取变量
const getters={
    updateStore(){
        return state.is
    },
    updateNav(){
        return state.routerArr

    }
  }

  const store = new Vuex.Store({
    state,mutations,actions,getters
})

export default store

testroute/ 1、2、3～     html页面

<template>
  <div>
      <div>1</div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      a:0,
    }
  },
  methods:{
  },

}
</script>>

 

utils/loaddingRouter     动态路由操作的逻辑

//实际路由地址
import {staicRouter,dyamicRouter} from "../utils/data"
//路由套件
import {resetRouter,router} from '../route/route'
//vuex  ----安装vuex注意版本 vue2 的要安装vuex3
import store from '../store/index'

let routes=[...staicRouter]  //静态路由保存

export default function useaddRoute(){
    try {
        //满足store 有数据 已登录 没有缓存
        if (store.state.is && store.state.routerArr.length === 4){
            console.log("走登录逻辑")
            store.dispatch('Nav',staicRouter)
            //模拟数据请求
            setTimeout(()=>{
                let data = routesData(dyamicRouter) //将动态路由放入总路由中(静态路由)---接口请求回来的
                store.dispatch('Nav',data)  //将路由放置缓存vuex
                resetRouter() //清空路由
                data.forEach(item => {
                    router.addRoute(item)  
                })
                console.log("登录组建路由完毕",data);
            },2000)
        }
        else if(store.state.is){
           pass;
        }
        else{
            console.log("走退出 or 无登录逻辑")
            //没有登录就加入静态路由--vuex
            store.dispatch('Nav',staicRouter)
            //清空路由
            resetRouter() 
            //加入静态跳转路由
            staicRouter.forEach(item => {
                router.addRoute(item)  
            })
            routes=[...staicRouter]
        }
    }catch(error){
        console.log(error)
    }
}

function routesData(result){
    result.forEach(item=>{
      routes.push({
        path: item.path,
        name: item.name,
        meta: item.meta,
        component: () => import(`../testroute/${item.compoent}`)
      })
    });
      return routes
  }

vuex 操作相关科普

获取vuex某个值
this.$store.state.count


//vuex
import store from '../store/index'

//调用actions里面的方法操作mutations里面的方法
store.dispatch('Nav',data)