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

Posted 2021-01-21

原因: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‘)