vue2.0：（五）、路由vue-router

好的，接下來，我們來寫路由。用的是vue2.0的路由。

步驟一：配置main.js

import Vue from 'vue';
import App from './App';
import router from './router';  <!------------------------這里引入的是router目錄，會默認識別里面的index.js文件（不能是其他名字）


/*eslint-disable no-new*/
new Vue({       <!------------------------實例化vue對象配置選項路由及渲染App組件
    router,
    el:'#app',
    render: h => h(App)
})

步驟二：配置App.vue，寫入組件

<template>
    <div id="aaa">
        <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>
        <router-view></router-view>
        <div class="footer">
            im footer
        </div>
    </div>
</template>

<script>
  import header from './components/header/header.vue';

  export default{
      components:{
          'v-header':header
      }
  }
</script>

<style lang="less"></style>

　　注意：知識點哦，知識點：

　　1、使用 router-link 組件來導航

　   2、通過傳入‘to’ 屬性指定鏈接(與router/index.js的path屬性相一致)

　　3、router-link 默認會被渲染成一個 <a>標簽

　　4、路由匹配到的組件將渲染在 router-view 中。

 

步驟三：在router文件中創建路由並配置路由映射 ，通過export輸出router到main.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;

　　注意：知識點哦，知識點：

　　1、mode設置為history表示利用了history.pushState API來完成URL跳轉而無須重新加載頁面。

　　2、linkActiveClass 設置當前選中項的樣式類名

　　3、最重要的是routes(注意：不是routers，沒有r)

　　　　1）、path 就是 router-link to后面跟的鏈接，注意保持一致；

　　　　2）、component 對應的組件，常見有兩種寫法：

　　　　　　　　a.第一種就是如上圖。

　　　　　　　　b.第二種可以：

routes: [ { path: '/goods',component:require('../components/goods/goods.vue') }, { path: '/ratings', component: require('../components/ratings/ratings.vue') }]

　　　　 3) redirect是指重定向，將根路徑重定向到指定路徑。也就是默認路徑是哪個。

　　　　本篇文章本來打算自己寫的，后來在思考問題查資料的時候發現有一篇文章寫的真是符合我的對這篇文章的期望，我就復制了他的文章。原文鏈接：https://www.cnblogs.com/smileTonya/p/6807385.html