页面切换好夥伴- Vue Router [续]

Vue Router 设定

延续上次的设定档

// src/router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

使用阵列来建立我们的 routes，每一个 route 都有几项特别项目需要注意:

• Path : 路由的 URL 路径
• Name : link 到此路由的名称
• Component : 当路由被呼叫时，要载入的元件

在 createRouter 中，除了传入 routes 外还可以传入 createWebHistory选择要使用 hash 或是 history mode。

接着就可以在main.js中加入 router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---加这 加这

createApp(App).use(router).mount('#app')

具名路由 (Named Routes)

指定 name 当作路由的参考

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
}

传入一个物件给 router-link 的 to 属性

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

对应的 URL 为 /user/123

转址 (redirect)

将/a 转页到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

也可以透过 name

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

别名 (alias)

和转址差异在於，转址是 URL 会被替换；而别名像是替路由再取另个名字，但网址列看到的 URL 不会被替换

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

　造访 /b 时，URL 保持 /b，但是匹配到 /a 的内容

参考

Vue Router: A Tutorial for Vue 3

下篇预告

• Vuex

每日一句:
使用者访谈，原来痛点在这里