使用vue-router创建一个简单示例

以下是一个完整的 Vue.js 应用示例，展示了如何创建一个简单的 Vue.js 应用，并使用 Vue Router 实现不同组件页面之间的导航。这个示例包括组件页面、路由配置以及如何构建和搭建这些页面。

1. 创建项目

首先，创建一个新的 Vue 3 项目：

npm init vue@latest

按照提示完成项目初始化。

2. 安装 Vue Router

在项目目录中，安装 Vue Router：

npm install vue-router

3. 创建组件

在 `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

在浏览器中打开网址即可看到页面实现的效果，