Vue 随笔1-加入vue router 后发现app被渲染了2次

原因:main中已经render了app，在route中不需要再加入app组件了，直接重定向到home即可

main.js

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import routes from './router/router'

Vue.config.productionTip = false

Vue.use(VueRouter)

const router = new VueRouter({

    mode: 'history',

    routes

})

new Vue({

    router,

  render: h => h(App)

}).$mount('#app')

route.js

const home = r => require.ensure([], () => r(require('../page/home/index.vue')),'home');

const hello = r => require.ensure([], () => r(require('../page/hello/index.vue')),'hello');

const hi = r => require.ensure([], () => r(require('../page/hi/index.vue')),'hi');

const wawa = r => require.ensure([], () => r(require('../page/wawa/index.vue')),'wawa');

export default [{

        path: '/',

        redirect:'home'

    },{

        path:'/home',

        component:home

    },{

        path:'/hello',

        component:hello,

        children:[{

            path:'hi',

            component:hi

        }]

    },{

    path:'/wawa',

    component:wawa

    }

]

App.vue

<template>

    <div id="app">

        <router-view></router-view>

    </div>

</template>

main.js

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import routes from './router/router'

Vue.config.productionTip = false

Vue.use(VueRouter)

const router = new VueRouter({

    mode: 'history',

    routes

})

new Vue({

    router,

  render: h => h(App)

}).$mount('#app')

©著作权归作者所有：来自51CTO博客作者小猪乔治的原创作品，如需转载，请注明出处，否则将追究法律责任

V