跳至主要内容

[Vue Router] 新增頁面並加入route

TL;DR​

在Vite環境下，使用Vue router建立頁面元件並加入路由中

參考資料​

相關連結​

注意事項​

在開始之前，需要再次注意是否已經將路由的設定(index.js)調整成Hash的router mode

如果還沒有調整可以參考這裡

建立NewPage.vue​

要加入一個頁面到路由時，首先我們要先建立一個頁面的元件。

如果是整個畫面的渲染，我們會放在views內。

如果只是畫面內某個小區域的元件，則會放在components內。

元件命名規則

習慣上，會將元件使用大駝峰的方式命名

在這裡，我們建立在views內：

./src/views/NewPage.vue
<template>
  <p>this is a new page</p>
</template>

設定route​

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue')
    }
  ]
})

export default router

./src/App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink :to="{
          name:'新增頁面'
        }">New</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
  ...
</style>

在使router-link的時候，有兩種方式：

  1. 直接使用to="index.js內所設定的path"

    e.g:<RouterLink to="/about">About</RouterLink>

  2. 使用動態路由:to="{name:'index.js內所設定的name'}"

    e.g:<RouterLink :to="{ name:'新增頁面' }">New</RouterLink>

caution

在第一層的時候，路由path要加上/開頭

在第二層以後的路由就可以不需要加上