vue3+Composition 组合式API+TypeScript+vuex+vue-router根据返回数据动态添加控制路由

瑞晟技术服务中心-耿瑞

已于 2022-09-13 17:39:55 修改

阅读量711

点赞数 3

文章标签： vue.js typescript javascript

于 2022-09-12 23:45:34 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/126824527

版权

首先你需要有一个vue3的项目
如果您还在用vue2 环境可以参考我的文章
将vue2项目升级成vue3项目

如果您不太了解vue继承TypeScript 可以参考我的文章
vue3项目集成TypeScript

如果你不熟悉vue+TypeScript中使用vuex 可以参考我的文章
Vue3 Composition 组合式API+TypeScript使用Vuex

然后我们就直接拿出三者结合好的一个vue项目作为开始

然后我们引入vue路由注意一下@版本号

npm install vue-router@

然后我们在src目录下创建一个router.ts
router.ts参考代码如下

import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path: "/",
            component: ()=>import(`@/components/HelloWorld.vue`),
            meta: {
                title: "首页",
                icon: "dashboard"
            }
        }
    ]
})

export default router;

src下store.ts参考代码如下

import { ComponentCustomProperties } from "vue";
import { createStore,Store } from "vuex";
import router from "./router";

declare module "@vue/runtime-core" {
    interface State {
        aggregate: Array<any>
    }
    interface ComponentCustomProperties {
        $store: Store<State>;
    }
}

const store = createStore({
    state() {
        return {
            aggregate: []
        }
    },
    mutations: {
    },
    actions: {
        filterAsyncRouter (state:any, routerData) {
            return new Promise(resolve=> {
                state.aggregate = [];
                routerData.map((item:any)=> {
                    state.aggregate.push(item)
                    router.addRoute({
                        path: item.path,
                        component: ()=>import(`@/components/${item.component}`),
                        meta: {
                            title: item.meta.title,
                            icon: item.meta.icon
                        }
                    })
                })
                resolve(routerData)
            })
        }
    }
})

export default store;

filterAsyncRouter 方法接受需要添加的路由通过 addRoute 动态添加路由
添加的路由会被存在aggregate 里

这里需要注意一个点 component: ()=>import(@/components/${item.component}), 中字符串必须是有一定内容的不能直接

`${item.component}`

这样就会直接报错
你的字符串前面必须要有一点内容
比如我这里就有
@/components/

src下 main.ts参考代码如下

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

createApp(App).use(router).use(store).mount('#app')

src下App.vue参考代码如下

<template>
  <div id="app">
   <router-view/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
 setup(){
    return {
    }
 }
});
</script>

App.vue中就是挂载路由的区域

我们找到src下的目录components
如下图创建
在这里插入图片描述
components下创建enterprise.vue
enterprise.vue参考代码如下

<template>
  <div>
    enterprise
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
 setup(){
    return {
    }
 }
});
</script>

创建mint文件夹目录
mint下面创建一个text.vue
text.vue参考代码如下

<template>
  <div>
    text
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
 setup(){
    return {
    }
 }
});
</script>

components下创建HelloWorld.vue
HelloWorld.vue参考代码如下

<template>
  <div>
     <button @click = "onCountData">添加路由</button>
     <button @click = "enterprise">跳转enterprise</button>
     <button @click = "textputt">跳转text</button>
     <button @click = "reloadsty">清空路由</button>
  </div>
</template>

<script lang="ts">
import {useStore} from "vuex";
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router'
export default defineComponent({
 setup(){
    const router = useRouter()
    const {dispatch,commit} = useStore();
    let data = [
      {
        path: "/enterprise",
        component: "enterprise.vue",
        meta: {
            title: "部门详情",
            icon: "dashboard"
        }
      },{
        path: "/text",
        component: "mint/text.vue",
        meta: {
            title: "测试路由",
            icon: "dashboard"
        }
      }
    ]
    const onCountData = function():void{
      dispatch('filterAsyncRouter', data).then((routerList) => {
          console.log(routerList);
      })
    }
    const enterprise = function():void{
      router.push('/enterprise')
    }
    const textputt = function():void{
      router.push('/text')
    }
    const reloadsty = function():void{
      commit('tuiminaggregate');
      location.reload();
    }
    return {
      onCountData,
      enterprise,
      textputt,
      reloadsty
    }
 }
});
</script>