以下是一个完整的 Vue.js 应用示例，展示了如何创建一个简单的 Vue.js 应用，并使用 Vue Router 实现不同组件页面之间的导航。这个示例包括组件页面、路由配置以及如何构建和搭建这些页面。
1. 创建项目
首先，创建一个新的 Vue 3 项目：
npm init vue@latest按照提示完成项目初始化。
2. 安装 Vue Router
在项目目录中，安装 Vue Router：
npm install vue-router3. 创建组件
在 `src/components` 目录下创建三个组件文件：`Home.vue`、`About.vue` 和 `User.vue`。
在`src/components/Home.vue`输入以下代码：
<template>
<div>
<h1>Home Page</h1>
<p>Welcome to the Home page!</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
在`src/components/About.vue`输入以下代码：
<template>
<div>
<h1>About Page</h1>
<p>This is the About page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
`src/components/User.vue`：
<template>
<div>
<h1>About Page</h1>
<p>This is the About page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
4. 配置路由
在 `src` 目录下创建一个新的文件 `router.js` 来配置路由。
`src/router.js`：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import User from './components/User.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', component: User },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
5. 修改主应用文件
修改 `src/main.js` 文件来使用路由。
`src/main.js`：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
6. 更新 `App.vue`
在 `src/App.vue` 中添加导航链接和路由视图。
`src/App.vue`：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/user/123">User</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #42b983;
}
nav a.router-link-exact-active {
font-weight: bold;
}
</style>
7. 运行项目
在项目目录下运行以下命令启动开发服务器：
npm run dev在浏览器中打开网址即可看到页面实现的效果，
