vue-router2路由配置和调用

vue-router是单页应用子页面的跳转机制，下面来说说vue-router的使用方法

1.安装路由 npm install -save-dev vue-router

2.路由配置  在main.js中引入vue和vue-router

import Vue from 'vue';
vue.use(router);

3.将要跳转的路由添加到路由对象的子对象中，  router.js代码如下

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [{
    path: '/goods', component: goods
  }, {
    path: '/ratings', component: ratings
  }, {
    path: '/seller', component: seller
  }, {
    path: '*', redirect: '/goods'
  }]
});
export default router;

4.路由引入   

import router from './router';

再将router加到当前vue实例中，main.js的代码如下

import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource';

import './common/stylus/index.styl';

Vue.use(router);
Vue.use(VueResource);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  eventHub: new Vue(),
  template: '<App/>',
  components: { App }
});

5.在主vue中，使用router-link和router-view

router-link是跳转链接的组件，router-view是显示内容的组件，是点击部分与显示部分，两者一一对应

App.vue中的结构如下

<div>
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div class="tab-item border-1px">
        <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>
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </div>

<keep-alive>标签是为了防止页面返回时多次重绘和刷新，从而保留页面信息