安裝

vue-router是一個外掛包，所以我們還是需要用npm / cnpm 來進行安裝。開啟命令列工具，進入你的專案目錄，輸入下面命令。如果報錯就用cnpm

npm install vue-router --save --dev

如果在一個模組化工程中使用它。必須通過Vue.use()明確地安裝路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

//顯示宣告使用VueRouter
Vue.use(VueRouter);

測試

1. 建立一個vue-cli程式 參考連結

2. 安裝 參考安裝標題

3. 新建兩個元件src/components/Content.vue和Main.vue

Content.vue

<template>
    <h1>內容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

Main.vue

<template>
    <h1>內容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>
 

4. 在src下新建一個檔案router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//匯入上面自定義的元件
import Content from "../components/Content";
import Main from "../components/Main";
//安裝路由
Vue.use(VueRouter);

//配置匯出路由
export default new VueRouter({
  routes:[
    {
      //路由路徑
      path:'/content',
      name:'content',
      //跳轉的元件
      component:Content
    },
    {
      //路由路徑
      path:'/main',
      name:'main',
      //跳轉的元件
      component:Main
    },
  ]
});
 

5. 在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from "./router"
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6. 在App.vue中使用路由

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <router-link to="/main">首頁</router-link>
    <router-link to="/content">內容</router-link>
    <router-view></router-view>
  </div>
</template>
....

7. 實現效果