javascript - vue 页面不渲染，但是没有报错？

问题描述

问 题

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/'
import store from './store/'
import './config/flexible'

Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  mode: 'history',
  strict: process.env.NODE_ENV !== 'production'
})

new Vue({
  el: '#app',
  router,
  store
})

router

import App from '../App'
const home = r => require.ensure([], () => r(require('@/components/home/home')), 'home')
export default [{
  path: '/',
  component: App, 
  children: [
     {
         path: '',
         redirect: '/home'
     },
     {
         path: '/home',
         component: home
     }
  ]
}]

App.vue

<template>
  <div class="main">
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    @import './style/common';
</style>

home.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped lang="scss">

</style>

解决方案

new Vue({
  el: '#app',
  router,
  store
})

这一步有问题啊，没把app.vue渲染上去啊

这篇关于javascript - vue 页面不渲染，但是没有报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！