vue.js - 为什么没有添加路由 $router.addRoutes？

Question

为什么没有添加路由$ router.addRoutes？我尝试了我做不到的一切

async loadMenu() {
        try{
            let res = await this.$http.get('/menu')
            this.menuItems = res.data
            res.data.forEach((e) => {
                this.$router.addRoutes([
                    {
                        path: /${e.url},
                        name: ${e.name},
                        component: require(`${e.compURL}`)
                    },
                ])
                console.log(e)
            })
        }catch(err){
            console.log(err)
        }
    },

我不明白为什么不添加动态路由？xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                title: 'EHZ',
                layout: 'default-layout',
                catId: 1
            }
        },
    ],
    mode: 'history',
    // base: locale,
})

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) { 

            Vue.axios.post('/auth/token')
                .then((res) => {
                    if ( res.status === 200 )
                        next()
                })
                .catch((e) => {
                    store.dispatch('logout')
                    next({ path: '/auth/login'})
                })
    }
    else {
        next()
    }
})

export default router;

我从 router.js 添加了代码。还有什么需要展示的吗？

---

我添加了一张我在res.data中得到的图片

图像资源数据

标签： vue.jsvue-componentvue-router

Answer 1

好吧，您可以按照以下方式实现它

在 header.vue 文件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/">Home</router-link>
    <div v-for="menu in dynamic" :key="menu.path">
      <router-link :to="menu.path">{{menu.name}}</router-link>
    </div>
  </div>
</template>

<script>
import About from "@/components/About";
import Contact from "@/components/Contact";
export default {
  name: "Header",
  data: function() {
    return {
      msg: "Header Component!",
      dynamic: [
        {
          name: "About",
          component: "About",
          path: "/about"
        },
        {
          name: "Contact",
          component: "Contact",
          path: "/contact"
        }
      ]
    };
  },
  created() {
    console.log("inside created");
    const routes = this.routerFormat(this.dynamic);
    console.log("routes ", routes);
    this.$router.addRoutes(routes);
  },
  methods: {
    routerFormat: function rFormat(routers) {
      console.log("inside routerFormat");
      if (!(routers instanceof Array)) {
        return false;
      }
      let fmRouters = [];
      routers.forEach(router => {
        let { path = "/404", component = "Error", name, children } = router;
        path = path || "";
        component = component || "Error";
        if (children && children instanceof Array) {
          children = rFormat(children);
        }
        console.log("component", component);
        let fmRouter = {
          path: path,
          component: About, // Import about page in the top
          //component: () => import(`./${name}.vue`).then(m => m),
          name: name,
          children: children
        };
        console.log(fmRouter);
        fmRouters.push(fmRouter);
      });
      console.log("fmRouters", fmRouters);
      return fmRouters;
    },
    addRoutes() {}
  }
};
</script>

希望能帮助到你！