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