Day018-Vue Router介紹(二)路由設定

第 12 屆 iThome 鐵人賽

DAY 18

自我挑戰組

與Vue相遇系列第 18 篇

12th鐵人賽 vue.js vue學習筆記 vuejs vue

EdwardXiong

2020-10-02 18:22:02

1068 瀏覽

Vue：設定基本路由，可以拆解成以下步驟：

定義模板 template
配置模板路線(routes)(每一條路線，都會對應到相應的component；而這邊的組件，會包含上面的template)
將router實例化，並存放routes
註冊router在vue中
掛載組件於畫面上

本節利用引入的方式來實作Vue Router的基本設定：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!--Router-Link透過cdn的方式掛載-->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>day18 Router-Setting</title>
</head>

  定義兩個template：

    const Index1 = { template: '<div>Page1</div>' }
    const Index2 = { template: '<div>Page2</div>' }

  route陣列中，所帶的物件，都有兩個主要屬性：(1)path(網址) (2)component(畫面)。
  因為，在此其中，網址要對應到畫面上。

    const routes = [
        {
            path: "/index1",
            component: Index1,
        },
        {
            path: "/index2",
            component: Index2,
        }
    ]

  實例化router

    const router = new VueRouter({
        routes
    })

  註冊Router於Vue實例中

    const vm = new Vue({
        el: "#app",
        //註冊router
        router,
        data() {
            return {
 
            }
        }
    })

完成第四步驟後，可以透過Vue Devtools來看看目前router是否有被偵測到：

你會很快發現，vue devtools已經偵測到有router的設置。我們可以試著在網址上輸入我們設定好的path：

如此，我們可以很明顯地看到，路徑是從主頁到/index1的頁面上。

ps(透過Vue DevTools，可以觀察vue的數據資料、路徑等，是一套非常好用的開發輔助工具)

如果，沒有將模組掛載到頁面上，當然不會顯示，所以，記得要將router-view掛載到頁面上喔！(以本範例，路由規則對應的component放在#app的區塊中)

<div id="app">
        <router-view></router-view>
 </div>

Vue是模組化的設計概念，而router是處理網址和畫面上的搭配，最後搭配router-view為顯示畫面的地方。

但是，你應該不會想每次都在網址上輸入相對應的頁面吧！此時的你，就需要使用router-link。

<div id="app">  
        <router-link to="/index1">Page1</router-link>
        <router-link to="/index2">Page2</router-link>
        <router-view></router-view>
</div>

到這裡，我們看一下Vue Devtools：