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 >

< 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" >

</ div >

< router-view ></ router-view >

</ div >

</ template >

< script >

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

export default {

name : 'app' ,

components : {

'v-header' : header

}

}

</ script >

< style >

. tab {

display : flex ;

width : 100 %;

height : 40 px ;

line-height : 40 px ;

}

. 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)

const router = new VueRouter({

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 default router

//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项目目录