Vue 網頁放置的形式 - daniel-qa/Vue GitHub Wiki

Vue 網頁放置的形式

  • vue 頁面如果放在 Html的 script 裡

形式會如下:

 <script>
        const { createApp } = Vue;
        const { createRouter, createWebHistory } = VueRouter;

        const Home = { template: '<div>首页内容</div>' };
        const About = { template: '<div>关于内容</div>' };
		
  </script>
  • vue 頁面如果放在 vue的 compent 裡 。( src/components)

形式會如下:

Home.vue：

<template>
    <div>
        <h1>Home Page</h1>
    </div>
</template>


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

About.vue：

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

<script>
export default {
    name: 'About'
}
</script>

export default:{ name: 'Home' }

這是一個 ES6 模組語法，表示將該組件作為默認導出。這樣其他文件就可以輕鬆地導入這個組件。

導入組件： 然後在定義路由的文件中，你需要導入這些組件。假設你的路由配置在 src/router/index.js 中，你可以這樣導入：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

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

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

export default router;
⚠️ **GitHub.com Fallback** ⚠️