边学边写webpack4 -- 加入vue路由

1.enter.js 入口文件

import Vue from 'vue';
import App from './app';
import vueRouter from 'vue-router';
import router from './router/';
import './static/css/main.css';
import './static/scss/main.scss';

Vue.use(vueRouter); //全局使用vue路由插件

new Vue({
    el: '#root',  //挂载点
    router,  // 路由
    //写法1
    // template: '<App/>', //模板
    // components:{
    //  App
    // }
    //写法2
    render: h => h(App)
});

2.router/index.js,router/routes.js 路由目录

import vueRouter from 'vue-router';
import routes from './routes';
export default new vueRouter({
    mode: 'hash',  //history模式webpack中devServer配置historyApiFallback,output的publicPath配置后会报错
    base: '/',
    routes: routes
});

import Home from '@/page/home';    //子组件
import Image from '@/page/image';  //@已经配置在webpack的resolve中
export default [
    {
        path: '/',
        component: Home
    },{
        path: '/home',
        component: Home
    },{
        path: '/image',
        component: Image
    }
];

开源demo