Vue初學34-vue-router的使用

vue-router簡介

       vue-router是Vue.js的官方路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用（SPA）。

       vue-router是基於路由和組件的，路由用於設定訪問路徑，將路徑和組件映射起來，在vue-router的單頁面應用中，頁面的路徑改變就是組件的切換。

       切換組件的過程不會重新發送請求，只是在前端進行組件的切換。

vue-router基本使用

下面以cli2爲例，演示下vue-router的基本使用

通過命令，新建名爲vueroutertest的項目

vue init webpack vueroutertest   

 

Install vue-router 選擇 yes 

創建完成後，結構如下

通過命令npm run dev 運行程序，默認效果如下

在頁面中添加兩個鏈接，通過vue-router，在前端實現組件的切換。

首先，在components目錄下，新建兩個組件home.vue和about.vue

<template>
     <div>
       <h2>我是home標題</h2>
       <span>我是home頁內容</span>
     </div>
</template>

<script>
export default {
  name: 'home',
};
</script>

<style scoped>
</style>

<template>
     <div>
       <h2>我是about標題</h2>
       <span>我是about頁內容</span>
     </div>
</template>

<script>
export default {
  name: 'about',
};
</script>

<style scoped>
</style>

router目錄下index.js文件修改如下

import Vue from 'vue'
import Router from 'vue-router'

import home from '../components/home'
import about from '../components/about'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/about',
      name: 'about',
      component: about
    }
  ]
})

 App.vue文件修改如下

<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

 其中，<router-view>標籤用於指定切換後的組件的位置

運行效果如下

 vue-router默認是採用的hash模式，地址中有#，如果不想要#可以指定採用history模式,這樣地址欄就不會有#符號

 

router-link的其他屬性 

tag屬性：<router-link>默認會被渲染成<a>標籤，tag可以指定<router-link>被渲染成什麼標籤，比如<button>

replace屬性：replace屬性不會留下history記錄，指定replace後，後退鍵不能返回上一個頁面。

<router-link>標籤對應的路由匹配成功時，會自動給當前元素設置一個router-link-active的class,可以在該class中設置樣式。

如果不用router-link可以通過代碼也實現路由跳轉