vue2.0结合webpack的路由配置教程

首先在网上照着一个教程学习vue路由配置，但后来发现版本并不一直，还是多少有点差别，所以自写了vue2.0 + webpack的路由配置。

首先在App.vue里：

<template>
<!-- <div id="app">
<img src="./assets/logo.png">
<router-view/>
</div> -->
<div id ="app">
<div class="tab">
<div class="tab-item">
<!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/bar">评价</router-link>
</div>
<div class="tab-item">
<router-link to="/">商家</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>

在main.js里：

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
/* eslint-disable no-new */
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{
path:"/Foo",
component: Foo
},
{
path: "/Bar",
component: Bar
},
]
var router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')

记住VueRouter的引入不能用npm安装时自带的“import VueRouter from ‘./router’”，要换成“import VueRouter from ‘vue-router’”