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’”