首页 > 移动平台 > 详细

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

时间:2018-11-20 19:08:41      阅读:178      评论:0      收藏:0      [点我收藏+]
原因: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‘)

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

原文:http://blog.51cto.com/12708284/2319118

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!