跳至主要内容

[Vue Router] 快速建立Router

TL;DR​

Vue Router起手式。

參考資料​

相關連結​

基本範例​

使用Vue Router時，Vite或是Webpack並不是必須的。

我們也可以單純使用Vue並且在裡面透過app.use加上Vue Router的功能。

完整程式碼​

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ title }}
    <router-link to="/a">A</router-link> | 
    <router-link to="/b">B</router-link>
    <router-view></router-view>
  </div>

  // 這邊選擇使用CDN載入物件在global上。因為vue-router相依於vue，所以載入順序要在vue之後。
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.11/vue.global.min.js"
    integrity="sha512-jUvo4wLmasBQ4VBRwG9qkfOP/6GkSepADybOv52QFmqEYQlPx8ihGINjxQkiaH+ygvkI0XI2dMSvPs2BcFL5Zg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.2.5/vue-router.global.js"
    integrity="sha512-p4IVRObGPqEwALMh7aOb8F8cu8hhUpHDHJTxWwiyUHlvBysSPK00bVQi9z186s9wvw6xqISRx7hT3Z45rBHvGw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="module">

    const { createApp } = Vue
    const { createRouter, createWebHashHistory } = VueRouter;

    const componentA = {
      template: `
      <div>A</div>
      `
    }
    const componentB = {
      template: `
      <div>B</div>
      `
    }

    const app = createApp({
      data() {
        return {
          title: "i'm title"
        }
      }
    })

    const router = createRouter({
      // 網址路徑模式設定
      history: createWebHashHistory(),
      // 匯入路由表
      routes: [
        {
          path: '/a',
          component: componentA
        },
        {
          path: '/b',
          component: componentB
        }
      ]
    })

    app.use(router);
    app.mount('#app');
  </script>
</body>

</html>

載入CDN​

這邊選擇使用CDN載入物件在global上。

因為vue-router相依於vue，所以載入順序要在vue之後。

  1. Vue CDN

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.11/vue.global.min.js" integrity="sha512-jUvo4wLmasBQ4VBRwG9qkfOP/6GkSepADybOv52QFmqEYQlPx8ihGINjxQkiaH+ygvkI0XI2dMSvPs2BcFL5Zg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  2. VueRouter CDN

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.2.5/vue-router.global.js" integrity="sha512-p4IVRObGPqEwALMh7aOb8F8cu8hhUpHDHJTxWwiyUHlvBysSPK00bVQi9z186s9wvw6xqISRx7hT3Z45rBHvGw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

router-view​

需要先在routes內撰寫對應的路由，接著再使用router-view根據目前所在的路由渲染對應的元件。

caution

需要注意！routes跟router是不同的用途！！

如果需要切換路由，可以使用router-link，搭配to="path"的方式。