账号密码登录
微信安全登录
微信扫描二维码登录

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-cli 开发多页面应用,数据请求和传输的问题
    • 2017-12-18 00:00
    • 10
    38
    0

    我使用 vue-cli 开发多页面应用,没有使用 router ,于是我现在只能在 main.js 里面 Vue 实例化的时候通过 Vue 的生命钩子进行请求数据。现在数据请求到了,如何将数据传给 app.vue?以下是代码:
    不限于如何传数据给 app.vue 如何能在 app.vue 中请求数据也可以。

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import App from './App'
    // import router from './router'
    import mock from '@/utils/index.js'
    import '@/assets/normalize.css'
    import '@/assets/common.css'
    import '@/assets/icon.css'
    
    axios.defaults.url = 'http://rap2api.taobao.org/app/mock/2006/'
    Vue.use(VueAxios, axios)
    
    Vue.config.productionTip = false
    
    var vm = new Vue({
        el: '#app',
        // router,
        template: '<App/>',
        components: { App },
        data: {
            data: {}
        },
        beforeMount: function() {
            let _this = this;
            Vue.axios.get('/index/articleList').then((res) => {
                res && (_this.$data.data.articleList = res.data.articleList);
            });
        }
    });
    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 寡ジ交◣ 普通会员 1楼

      在Vue CLI中,开发多页面应用时,数据请求和传输问题可以通过以下几种方式来解决:

      1. 使用 Vuex:Vuex 是 Vue CLI 提供的一个状态管理工具,它可以帮助我们管理应用程序中的数据状态,包括页面间的数据传递。在使用 Vuex 时,我们需要在每个页面的组件中使用 store,这样数据在组件之间进行传递。

      2. 使用 Axios 或 Fetch API:Vue CLI 提供的 Axios 或 Fetch API 可以帮助我们发送 HTTP 请求。在需要从服务器获取数据的页面,我们可以使用 Axios 或 Fetch API 发送请求,然后在对应的组件中解析返回的数据。

      3. 使用 Vue Router:Vue Router 是 Vue CLI 提供的一个路由管理工具,它可以帮助我们管理应用程序中的路由。在需要跳转到其他页面时,我们可以使用 Vue Router,然后在对应的组件中使用 history.push 方法跳转到新的页面。

      4. 使用 Vuex Store 的 getters 和 actions:Vuex Store 的 getters 和 actions 可以帮助我们管理应用程序中的数据状态。在需要在多个页面之间共享数据时,我们可以使用 getters 和 actions,然后在对应的组件中使用 store 中的数据。

      以上就是解决 Vue CLI 开发多页面应用中数据请求和传输问题的一些常见方法,具体的实现方式可以根据项目的实际需求进行选择。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部