教你使用Vue路由

Vue路由vue-router是官方提供的一個插件，Vue要使用插件必須先安裝插件。

安裝插件

npm install vue-router --save

–save是保存安裝路由信息到package.json,默認爲dependencies節點中。

代碼中安裝路由插件以及創建路由對象。

這部分寫在router/index.js中

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../components/Home";
import About from "../components/About";
 
// 1. 安裝插件
Vue.use(VueRouter)
 
const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    component: Home
  },
  {
    path: "/about",
    component: About
  }
]
 
// 2. 創建路由對象
const router = new VueRouter({
  routes
});
 
// 3. 導出router
export default router;

router對象創建完並導出之後，需要再main.js中掛載路由對象。
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'    //導入路由對象。當導入目錄下的index.js，可以省略index.js，因爲導入 './router'，其實是導入 './router/index.js'
 
 
Vue.config.productionTip = false
 
new Vue({
  router,　　// 掛載路由對象，必須將路由對象掛載到vue實例中
  render: h => h(App),
}).$mount('#app')

使用路由

vue-router提供了兩個標籤：
　1. < router-link> 可以切換瀏覽器中的地址
　2. < router-view> 根據瀏覽器中的地址，動態渲染地址對應的組件，這個對應關係在 router/index.js中配置
由於main,js中

new Vue({
  router,　
  render: h => h(App),
}).$mount('#app')

默認是render App.vue組件，所以router-link和router-view要寫在App.vue組件中。
App.vue

<template>
  <div id="app">
    <router-link to="/home">首頁</router-link>　　<!-- 這裏控制瀏覽器地址的內容 -->
    <router-link to="/about">關於</router-link>
    <router-view></router-view>　　<!-- vue根據瀏覽器的地址，將對應的組件渲染到該位置 -->
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
     
  }
}
</script>
 
<style>
 
</style>

到此就實現了首頁和關於頁面的切換