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