Vueが動的にルートを追加する

近年、当然のことながら研究権限に関わることが动态加载路由信息不可欠になっています。次に、具体的に調査した内容を記録します。

1.まず、バックエンドコードは对象javaで記述された1 を返し对象、文字ではないものを返します。文字の場合は、フロントエンドに変換するように注意して对象ください。

@GetMapping("/home/index")
public List<Router> index() {
    List<Router> routers = new ArrayList<>();
    Router router = new Router();
    router.setPath("/index");
    router.setName("index");
    router.setComponent("components/index");
    routers.add(router);
    return routers;
}

2.内部のコンポーネントを見つけるだけ动态添加路由信息です。ここvuexでは関連するものを使っていますので、あまり紹介しません。注：現時点でimportは、すべてではなく使用变量、パス情報の一部のみが必要です。私の場合、@ /はルートディレクトリを意味します。変数を書き込むだけでは、モジュールを読み取ることができません。

<template>
  <div>测试下router</div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      aa: []
    }
  },
  created () {
    // 创建一个请求
    axios.get('http://localhost:8080/home/index').then(response => {
      var routers = []
      response.data.forEach(item => {
        var com = item.component
        var temp = {
          path: item.path,
          name: item.name,
          component: () => import(`@/${com}`)
        }
        routers.push(temp)
        this.$store.commit('SET_ROUTEINFO', routers)
      })
      console.dir(this.$store.getters.routeInfo)
      this.$router.addRoutes(this.$store.getters.routeInfo)
    }).catch(error => console.dir(error))
  }
}
</script>

3.次に、http：// localhost /＃/ indexにアクセスします。注：ページを更新するたびに、ページは再初期化されます。