webpack——在模块化环境中使用vue-router

1、下载

npm i vue-router

2、引用资源

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

3、配置externals

externals:{
    'vue-router':'VueRouter'
}

4、在router.js文件中加载使用

import VueRouter from 'vue-router'
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

//这里直接默认导出new出来的router实例
export default new VueRouter({
    routes:[
        {
            path:'/foo',
            component:Foo
        },
        {
            path:'/bar',
            component:Bar
        }
    ]
})

5、在main.js文件中配置使用路由对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
    el:'#app',
    router,
    template:'<App />',
    components:{
        App
    }
})

6、在App.vue中设置路由出口

<template>
    <div id="app">
        <h1>根组件</h1>
        <ul>
            <li><a href="#/foo">go to foo</a></li>
            <li><a href="#/bar">go to bar</a></li>
        </ul>
        <router-view> </router-view>
    </div>
</template>