账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue后端菜单数据怎么转换为动态路由表
    18
    0

    后台返回的格式如下，我希望转换成vue的路由表，弄了半天搞不出来，最后的子节点sub为空的不能要，有没有大神指导一下方法。
    "menus": [{

            "id": 1,
        "pid": null,
        "name": "系统管理",
        "premission": "",
        "remark": null,
        "createtime": "2018-10-31T00:28:56.000+0000",
        "createuser": "",
        "modifytime": "2018-11-14T03:03:25.000+0000",
        "modifyuser": "",
        "deltag": 0,
        "subs": [{
            "id": 2,
            "pid": 1,
            "name": "用户管理",
            "premission": "sys:user:list",
            "remark": null,
            "createtime": "2018-10-31T01:43:25.000+0000",
            "createuser": "",
            "modifytime": "2018-11-14T03:03:25.000+0000",
            "modifyuser": "",
            "deltag": 0,
            "subs": [{
                "id": 3,
                "pid": 2,
                "name": "用户添加",
                "premission": "sys:user:add",
                "remark": "",
                "createtime": "2018-10-31T01:43:25.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "用户管理",
                "component": null,
                "selected": null
            }, {
                "id": 4,
                "pid": 2,
                "name": "用户修改",
                "premission": "sys:user:update,sys:user:info",
                "remark": null,
                "createtime": "2018-11-14T03:16:04.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:16:07.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "用户管理",
                "component": null,
                "selected": null
            }, {
                "id": 5,
                "pid": 2,
                "name": "用户删除",
                "premission": "sys:user:del",
                "remark": null,
                "createtime": "2018-11-16T19:41:13.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "用户管理",
                "component": null,
                "selected": null
            }, {
                "id": 6,
                "pid": 2,
                "name": "用户授权",
                "premission": "sys:user:prem,sys:role:list",
                "remark": null,
                "createtime": "2018-11-16T19:41:30.000+0000",
                "createuser": "",
                "modifytime": "2018-11-14T03:03:25.000+0000",
                "modifyuser": "",
                "deltag": 0,
                "subs": null,
                "isfunc": true,
                "icon": "fa fa-circle-o",
                "url": null,
                "pidname": "用户管理",
                "component": null,
                "selected": null
            }],
            "isfunc": null,
            "icon": "fa fa-users",
            "url": "/sys/user/list.html",
            "pidname": "系统管理",
            "component": null,
            "selected": null
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 陈龄耀 普通会员 1楼

      在 Vue 中，我们可以使用 Vuex 来管理路由表。以下是一个简单的步骤：

      1. 安装 Vuex：你可以使用 npm 安装 Vuex。在你的项目中，打开终端并运行以下命令：

      bash npm install vuex

      1. 创建 store.js 文件：在你的项目中，创建一个名为 store.js 的文件，然后在其中添加以下代码：

      ```javascript import Vue from 'vue' import Vuex from 'vuex'

      Vue.use(Vuex)

      export default new Vuex.Store({ state: { menuData: { menu: [ { name: 'Home', path: '/index' }, { name: 'About', path: '/about' }, { name: 'Contact', path: '/contact' } ] } } }) ```

      1. 定义 mutations：在你的项目中，创建一个名为 mutations.js 的文件，然后在其中添加以下代码：

      ```javascript export const SET_menuData = ({ menuData }) => { this.state.menuData = menuData }

      export default { state: { menuData: { menu: [] } }, mutations: { SET_menuData }, actions: { fetchMenuData: async () => { // 这里是你的数据获取代码，比如使用 axios 或者数据库查询 // 你可以将获取的数据放入 store 中，然后在这里触发 mutations } } } ```

      1. 定义 actions：在你的项目中，创建一个名为 actions.js 的文件，然后在其中添加以下代码：

      ```javascript export const fetchMenuData = async () => { // 这里是你的数据获取代码，比如使用 axios 或者数据库查询 // 你可以将获取的数据放入 store 中，然后在这里触发 actions }

      export default { methods: { updateMenuData({ path }) { // 这里是你的菜单数据更新代码，比如将新路径添加到 menuData 中 } } } ```

      1. 定义 getters 和 setters：在你的项目中，创建一个名为 getters.js 和 setters.js 的文件，然后在其中添加以下代码：

      javascript export const getMenuData = state => state.menuData export const setMenuData = state => state.menuData export const updateMenuData = state => state.menuData

      1. 在你的组件中使用 Vuex：你可以在你的 Vue 组件中使用 Vuex 的 getters 和 setters，这样就可以在组件中直接修改路由表。以下是一个简单的示例：

      javascript export default { name: 'App', data() { return { menuData: { menu: [ { name: 'Home', path: '/index' }, { name: 'About', path: '/about' }, { name: 'Contact', path: '/contact' } ] } } }, methods: { updateMenuData({ path }) { this.menuData.menu.push({ name: path }) } }, mutations: { SET_menuData }, actions: { fetchMenuData: async () => { // 这里是你的数据获取代码，比如使用 axios 或者数据库查询 // 你可以将获取的数据放入 store 中，然后在这里触发 mutations } } }

      以上就是一个简单的 Vue 后端菜单数据转换为动态路由表的过程。你可以在你的 Vue 组件中直接修改路由表，实现更复杂的路由管理功能。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部