vue-router 配置路由

router:路由其實就是指根據不同URL跳轉到對應的頁面。Vue-router通過管理URL，實作URL群組件的對應，以及通過URL進行元件之間的切換。

如何使用？

1.安裝

cnpm install vue-router           

2.配置路由

（1）在src目錄建立一個router檔案夾，并建立一個index.js檔案

（2）編輯index.js檔案

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login.vue'
import Register from '@/pages/register.vue'
import FirstPage from '@/pages/firstPage.vue'
import Category from '@/pages/category.vue'
import Order from '@/pages/order.vue'
import My from '@/pages/my.vue'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    },
    {
      path: '/firstPage',
      name: 'firstPage',
      component: FirstPage
    },
    {
        path: '/category',
        name: 'category',
        component: Category
    },
    {
        path: '/order',
        name: 'order',
        component: Order
    },
    {
        path: '/my',
        name: 'my',
        component: My
    }
  ]
})           

（3）在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/store.js'
import FastClick from 'fastclick';
import http from './common/http.js';
import './common/rem.js';
import './style/my-mint.scss';//全局修改mint-UI樣式
import MintUI from 'mint-ui'
Vue.use(Vuex)
Vue.use(MintUI)


Vue.config.productionTip = false
//去除300毫秒的點選延遲
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body);
  }, false);
}

//把請求挂在全局vue執行個體下，可以直接在頁面或者元件中用this.$http()來使用
Vue.prototype.$http = http;
// Vue.prototype.baseUrl = '/scs-api';
Vue.prototype.baseUrl = '/jiayin-website';

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

（4）使用

App.vue
<template>
  <div id="app">
    <div class="main">
      <router-view/>
    </div>
    <Footer class="footer"/>
  </div>
</template>

<script>
  import Footer from './components/footer.vue'
  export default {
    name: 'App',
    components: {
      Footer
    },
    computed: {}
  }
</script>

<style>
  @import "style/reset.css";
  @import "style/style.css";
  #app{
    background: #FFF;
      height: 100%;
  }
  .footer{
    height:55px;
  }
</style>