app.vue中的代码不能渲染

Question

app.vue中的代码不能渲染

发布于
2017-04-17

vue1.0,router0.7 无法加载app.vue中的内容,页面不报错,但是页面是空白

main.js的代码

import Vue from 'vue'
import Mint from 'mint-ui'
import {InfiniteScroll,Indicator} from 'mint-ui';
import axios from 'axios'
import Router from 'vue-router'
import routerMap from './router'
import App from './App.vue'


Vue.use(Mint);
Vue.use(InfiniteScroll);
Vue.use(Router);
/**
 * 价格转换为0.00的浮点数
 */
Vue.filter('transformPrice', function (value) {
    if (value >= 0) {
        return parseFloat(value).toFixed(2);
    }
});

/**
 * 商品详情换行
 */
Vue.filter('rnTransform', function (value) {
    if (value) {
        return value.replace(/\r\n/g, "<br/>");
    }
});

/**
 * 数据列表无限滚动监听
 */
Vue.directive('data-scroll', function (value) {
    window.addEventListener('scroll', ()=> {
        let fnc = value;
        fnc();
    });
});

/**
 * 手机号隐私处理
 */
Vue.filter('transformPhone', function (value) {
    if (value) {
        let phone = value;
        let phone_head = phone.substring(0, 3);
        let phone_foot = phone.substr(7, 4);
        return phone_head + '****' + phone_foot;
    }
});

Vue.config.devtools = true;
Vue.prototype.$http = axios;

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('#csrf-token').getAttribute('content');
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

const app = Vue.extend(App);

const router = new Router({
    history: false,
    mode: 'hash'
});

routerMap(router);


router.beforeEach((transition) => {
    document.body.scrollTop = 0;
    Indicator.close();
    transition.next();
});

router.start(App, '#body');

app.vue的代码

<template>
    <div>
        <router-view>111</router-view>
        <navbar></navbar>
    </div>
</template>

<script>
    import Navbar from './components/_layouts/Navbar.vue';

    export default{
        components:{
            Navbar
        },
        name: 'app',
        replace: false,
        data(){
            return{
                user:''
            }
        },
        created(){
            console.log('sss');
            this.fetchUser();
        },
        methods:{
            fetchUser:function(){
                let vm = this;
                let userInfo = localStorage.getItem('userInfo');
                let shopConfig = localStorage.getItem('shopConfig');
                if(userInfo){
                    vm.$set('user',JSON.parse(userInfo));
                }else{
                    vm.$http.get('/api/userinfo').then(function(response){
                        vm.$set('user',response.data);
                        localStorage.setItem('userInfo', JSON.stringify(response.data));
                    });
                }
                if(!shopConfig){
                    vm.$http.get('/api/shopconfig').then(function(response){
                        localStorage.setItem('shopConfig', JSON.stringify(response.data));
                    });
                }
            }
        }
    }
</script>

router.js的代码

export default function (router) {
    router.redirect({
        '*': '/index'
    });

    router.map({
        '/index': {
            name: 'index',
            component: require('./components/Index.vue')
        },
        '/category': {
            name: 'category',
            component: require('./components/Category.vue')
        },
        '/:hashid/commodity': {
            name: 'commodity',
            component: require('./components/Commodity/CommodityDetail.vue')
        },
        '/cart': {
            name: 'cart',
            component: require('./components/Cart.vue')
        },
        '/usercenter': {
            name: 'usercenter',
            component: require('./components/UserCenter.vue')
        },
        '/attr': {
            name: 'attribute',
            component: require('./components/Attribute/Attribute.vue'),
            subRoutes: {
                '/:hashid/topic': {
                    name: 'aTopic',
                    component: require('./components/Attribute/Topic.vue')
                },
                '/:hashid/plate': {
                    name: 'aPlate',
                    component: require('./components/Attribute/Plate.vue')
                },
                '/:hashid/category': {
                    name: 'aCategory',
                    component: require('./components/Attribute/Category.vue')
                }
            }
        },
        '/address': {
            name: 'address',
            component: require('./components/Address/AddressList.vue')
        },
        '/add-address': {
            name: 'add-address',
            component: require('./components/Address/AddressAdd.vue')
        },
        '/:hashid/edit-address': {
            name: 'edit-address',
            component: require('./components/Address/AddressEdit.vue')
        },
        '/:hashid/choose-address': {
            name: 'choose-address',
            component: require('./components/Address/AddressChoose.vue')
        },
        '/ordersettle': {
            name: 'order-settle',
            component: require('./components/Order/OrderSettle.vue')
        },
        '/:type/orderlist': {
            name: 'order-list',
            component: require('./components/Order/OrderList.vue')
        },
        '/:hashid/orderdetail': {
            name: 'order-detail',
            component: require('./components/Order/OrderDetail.vue')
        },
        '/:hashid/orderpay': {
            name: 'orderpay',
            component: require('./components/Order/OrderPay.vue')
        },
        '/suggestion': {
            name: "suggestion",
            component: require('./components/Suggestion/Suggestion.vue')
        }
    });
}

运行之后的dom
图片描述