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>

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

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

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

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

　　四、路由匹配到的組件將渲染在 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;

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

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

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

　　三、最重要的是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