vue路由

 vue-cli 全局安装

 命令行执行 : npm install -g vue-cli    // 加-g是安装到全局

安装完成以后 可以输入命令 ：vue 回车，可以看到针对vue的命令行；

初始化项目

执行命令： vue init webpack demo(你新建的项目名称/文件名称)

执行之后将会 自动初始化一个文件夹 ：demo

npm install //安装依赖

npm run dev

App.vue

<template>

<div id='app'>

<v-header></v-header>

<div class='tab'>

<div class='tab-item'>

<router-link to="/goods">商品</router-link>

</div>

<div class='tab-item'>

<router-link to="/ratings">评论</router-link>

</div>

<div class='tab-item'>

<router-link to="/seller">商家</router-link>

</div>

</div>

<div class='content'>

<router-view></router-view>

</div>

</div>

</template>

<script>

import header from './components/header/header.vue'

export default{

components:{

'v-header':header

}

}

</script>

<style>

.tab{

width:100%;

height:40px;

line-height:40px;

display:flex;

}

.tab .tab-item{

flex:1;

text-align:center;

}

</style>

main.js //定义路由

import Vue from 'vue'

import App from './App'

import VueRouter from 'vue-router' //配置文件中为'vue-router

import goods from './components/goods/goods.vue'

import ratings from './components/ratings/ratings.vue'

import seller from './components/seller/seller.vue'

import VueResource from 'vue-resource'

Vue.use(VueRouter)

Vue.config.productionTip = false

const routes = [

{ path: '/goods', component:goods},

{ path: '/ratings', component:ratings},

{ path: '/seller', component:seller}

]

const router = new VueRouter({

routes // routes: routes 的简写

})

const app = new Vue({

el:'#app',

router,

components: { App },

template: '<App/>'

})

header.vue //公用组件

<template>

<div class='header'>

我是header

</div>

</template>

<script>

export default{}

</script>

<style>

.header{

width:100%;

height:60px;

line-height:60px;

font-size:18px;

text-align:center;

color:#999;

}

</style>

goods.vue

<template>

<div>I am goods</div>

</template>

<script>

export default{}

</script>

<style></style>

seller.vue

<template>

<div>I am seller</div>

</template>

<script>

export default{}

</script>

<style></style>

ratings.vue

<template>

<div>I am ratings</div>

</template>

<script>

export default{}

</script>

<style></style>