Vue 隨筆1-加入vue router 後發現app被渲染了2次
阿新 • • 發佈:2018-11-20
() product 渲染 vuerouter render require view [] 定向 原因: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次