新增加一個 vue 網頁連結 - daniel-qa/Vue GitHub Wiki

  • 直接在 router 中增加路由
 {
     path: "/demo",
     name: "demo",
     roles: "all",
     component: () => require.ensure([], (require) => require(`@/view/index/demo.vue`))
 },

新增加一個 vue 網頁連結

在 Vue 應用中，若要新增一個連結以便在新頁面中開啟另一個 Vue 網頁，通常可以使用 Vue Router 來實現路由導航。以下是如何設定的步驟：

1. 安裝 Vue Router

npm install vue-router

2. 設定路由

在你的 Vue 應用中，創建一個路由配置文件（例如 router/index.js）：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'; // 假設你的首頁
import NewPage from '../views/NewPage.vue'; // 新的 Vue 網頁

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/new-page',
    name: 'NewPage',
    component: NewPage,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

3. 在主應用中使用路由

在你的主應用入口文件（例如 main.js）中引入並使用 router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

4. 創建新頁面組件

在 views 目錄中創建 NewPage.vue：

<template>
  <div>
    <h1>這是新頁面</h1>
    <p>歡迎來到新頁面！</p>
  </div>
</template>

<script>
export default {
  name: 'NewPage',
};
</script>

<style scoped>
/* 這裡可以添加樣式 */
</style>

5. 在首頁新增連結

在 Home.vue 中新增一個連結，點擊後將導航到新頁面：

<template>
  <div>
    <h1>首頁</h1>
    <router-link to="/new-page">前往新頁面</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
/* 這裡可以添加樣式 */
</style>
⚠️ **GitHub.com Fallback** ⚠️