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

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

首先在app.vue里：

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