vue2.0，vue-router配置

步骤一：
在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件
默认设置如下：

import Vue from 'vue' 
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
  el: '#app', 
  router, 
  template: '<App/>', 
  components: { App }
})

自定义设置：
import
Vue
from
'vue'
import
App
from
'./App'
import
router
from
'./router'
import
VueResource
from
'vue-resource'

Vue.use(VueResource)

Vue.config.productionTip
= false

/* eslint-disable no-new */
new
Vue({
el:'#app',
router,
render:
h => h(App)
})
如图：



步骤二：App.vue文件是我们的组件入口，写入组件
<template>
<div>
<v-header></v-header>
<divclass="tab">
<divclass="tab-item">
<router-linkto="/goods">商品</router-link>
</div>
<divclass="tab-item">
<router-linkto="/ratings">评论</router-link>
</div>
<divclass="tab-item">
<router-linkto="/seller">商家</router-link>
</div>
</div>
<divclass="content">
</div>
<router-view></router-view>
</div>
</template>

<script>
importheader
from'./components/header/header.vue'
export
default {
name:'app',
components:
{
'v-header':
header
}
}
</script>

<style>
.tab{
display:flex;
width:100%;
height:40px;
line-height:40px;
}
.tab.tab-item{
flex:1;
text-align:center;
}
</style>
步骤三：在router/index.js文件中创建路由并配置路由映射 ，并通过export输出router到main.js文件中
import
Vue
from
'vue'

import
VueRouter
from
'vue-router'

Vue.use(VueRouter)

constrouter=
newVueRouter({
mode:'history',
routes:
[
{path:'/goods',component:
require('../components/goods/goods.vue') },
{path:'/seller',component:
require('../components/seller/seller.vue') },
{path:'/ratings',component:
require('../components/ratings/ratings.vue') }
]
})

export defaultrouter
//mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。
mode有三种模式如下：
I) hash模式:使用URL hash值来作为路由。支持所有浏览器。
II) history模式：依赖HTML5 History API和服务器配置。查看HTML5 History模式。
III) abstract模式:支持所有JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

可以添加在const
router = new VueRouter({})里面，自定义
scrollBehavior 设置了滚动条起始位置。
linkActiveClass 设置当前选中项的样式类名
注意reouts不是router

vue2.0项目目录