Vue Router

Vue Router Start

安裝 Vue Router

npm install vue-router

App.vue

當你定義 routes 時，每個路由會對應一個 .vue 檔案，

在 App.vue 裡，你可以放一個 <router-view>，它會根據當前 URL，顯示對應的 .vue 檔案：

<router-view> 是一個「容器」，Vue Router 會根據 routes 設定，把對應的 .vue 動態插入到這個容器內，實現無刷新頁面切換。

<template>
  <div>
    <nav>
      <router-link to="/">首頁</router-link>
      <router-link to="/about">關於我們</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

src/router.js

• 用戶訪問 **/**，Vue Router 會匹配 path: '/'，然後將 HomePage.vue 渲染到 <router-view> 內。

• 用戶訪問 **/about**，Vue Router 會匹配 path: '/about'，然後將 AboutPage.vue 渲染到 <router-view> 內。

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './views/HomePage.vue';
import AboutPage from './views/AboutPage.vue';

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
];

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

export default router;

views/HomePage.vue

<template>
  <h1>這是首頁</h1>
</template>

views/AboutPage.vue

<template>
  <h1>這是關於我們</h1>
</template>

重新加载当前路由

import { useRouter } from 'vue-router';

export function useCategory() {
    const router = useRouter();

    const editCategory = (categoryName, newCategoryName) => {
        // 修改数据...

        // 重新加载当前路由
        router.go(0);  // 或者使用下面的替代方法

        // 替代方法：获取当前路由并重新导航
        // const currentRoute = router.currentRoute.value;
        // router.push({...currentRoute});
    };

    return { editCategory };
}

完成後跳轉指定頁面

import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

export function useTask() {
  const router = useRouter();

  // ... 你的其他代碼 ...

  const addTask = () => {
    // ... 你的添加任務邏輯 ...

    // 成功後
    successNotyftMessage(['任務已添加', 'Task added']);

    // 導航回首頁
    router.push('/');
  };

  return {
    // ... 其他返回值 ...
    addTask
  };
}

## 动态参数

目標：讓所有 /{}/tasks ,{} 代表該 category name

实现根据动态路径参数获取分类名称，然后传递给 task 组件

修改前

// router.js
const routes = [
  { path: '/', component: Home },
  { path: '/{}/tasks', component: CategoryTaskList },
];


//CategoryTaskList.vue

<script setup>
import task from '@/components/task.vue'
import { useRoute } from 'vue-router';

const route = useRoute();

</script>

<template>
  <task v-bind:page="route.path.name" v-bind:categoryName="route.path.name" />
</template>

// task.vue 
<router-link to="/{category}/tasks" class="clean-link">
    <div class="export-category">
      <span>{{ category }}</span>
    </div>
</router-link>

修改後

//在 router.js 中，动态路由参数应该使用冒号定义：
const routes = [
  { path: '/', component: Home },
  { path: '/:category/tasks', component: CategoryTaskList },
];

//在 CategoryTaskList.vue 中，您可以这样获取路由参数：
<script setup>
import task from '@/components/task.vue'
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<template>
  <task v-bind:page="route.params.category" v-bind:categoryName="route.params.category" />
</template>

//在 task.vue 中，生成链接时应该使用动态参数：
<router-link :to="`/${category}/tasks`" class="clean-link">
  <div class="export-category">
    <span>{{ category }}</span>
  </div>
</router-link>

关键点说明：

• 动态路由参数在 Vue Router 中使用冒号（:category）定义

• 使用 route.params.category 获取当前路由的分类参数值

• 生成链接时，使用模板字符串或 v-bind 动态构建链接地址

这样设置后，当用户访问 /finance/tasks 这样的路径时，Vue Router 会将 finance 作为 category 参数传递给组件，您可以通过 route.params.category 获取这个值。

---

Be the first one to support oldfesixsixsix.

---