搜尋

首頁  >  問答  >  主體

laravel - vue-router如何非同步載入路由

目前專案使用者權限依賴關係:

#因為權限比較複雜如果將路由在前端寫死的話,那麼一個普通員工登入後也要載入幾百甚至上千個路由及對應的元件。

  1. 效能問題

  2. 前後端都要做權限驗證,想到這個就頭痛

#基於這兩項考慮,決定將路由寫在資料庫中,然後後端根據登入使用者的權限動態分配路由給前端載入。

但是我在前端用ajax請求的時候,發現總是在vue初始化完成後(也就是說路由已經載入了)才向後台請求路由資料

請求的程式碼放在main.js和vue生命週期的beforeCreate中都一樣

const routes = [];

const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes
})

const app = new Vue({
    router,
    el: '#app',
    data: routes,
    template: '<App/>',
    components: { App },
    created: function () {
        const self = this
        axios.get('https://service.it/api/routes')
            .then(function (response) {
                self.routes = response.data;
            })
            .catch(function (error) {
                console.log(error)
            })
    }
})

求前端大神解答!

PHPzPHPz2739 天前818

全部回覆(2)我來回復

  • phpcn_u1582

    phpcn_u15822017-05-16 16:50:20

    vue-router@2.2.0開始,router.addRoute(routes)動態新增路由

    回覆
    0
  • 滿天的星座

    滿天的星座2017-05-16 16:50:20

    使用axios 先ajax請求得到路由配置 再初始化vue實體

    回覆
    0
  • 取消回覆