10.3 Vue 路由系統

 Vue 路由系統

 簡單示例

main.js 

import Vue from 'vue'
import App from './App.vue'


//https://router.vuejs.org/zh/guide/#html 若有疑問。請看官方手冊

// 1.引入 vue-router
import VurRouter from "vue-router"

//  3.定義（路由 ）組件
import Vmain from "./components/Vmain"
import Vcourse from "./components/Vcourse"
import Vmark from "./components/Vmark"

// 2.聲明使用 vue-router
Vue.use(VurRouter);

// 4.定義路由對象，每一個路由對象映射一個組件
const routes = [
  {path:"/",component:Vmain},
  {path:"/course",component:Vcourse},
  {path:"/mark",component:Vmark}
];

// 5.將路由對象的集合加載在 VurRouter 中
const router = new VurRouter({
  mode:"history",
  routes
});


new Vue({
  el: '#app',
  // 6. 掛載在 Vue 中
  router, // 至關於 routes：routes 的簡寫
  render: h => h(App),

});

// 7. 如今能夠啓動你的應用了

APP.vue

<template>
  <div>
    <ul>
      <li>
        <router-link to="/">首頁</router-link>
      </li>
      <li>
        <router-link to="/course">課程表</router-link>
      </li>
      <li>
        <router-link to="/mark">編輯器</router-link>
      </li>
    </ul>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <!--路由 出口-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {}
    },
    methods: {},
    computed: {},
    components: {},
  }
</script>

<style>

</style>

總結

準備：

　　　　引入vue-router

　　　　聲明使用 

　　　　定義組件

　　　　映射組件URL

　　　　加載在 vue-router

　　　　掛載在 vue 上

使用：

　　router-link 標籤 

　　to 屬性到 URL

　　router-view 展示組件內容