Vue 3 项目中安装和配置 Vue Router

1.创建vue项目

vue create project

选择vue 3

进入项目目录

cd project

2 安装router

npm install vue-router@4

2. 配置 Vue Router

接下来，你需要配置 Vue Router。

首先，创建一个新的文件来定义你的路由。在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件

在 src/router/index.js 文件中设置你的路由配置：

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

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

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

export default router

3. 创建视图组件

在 src/views 目录下创建两个示例视图组件 Home.vue 和 About.vue：

//Home.vue

<template>
  <div>
    <h1>this is home page</h1>
  </div>
</template>

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

//About.vue

<template>
  <div>
    <h1>this is about page</h1>
  </div>
</template>

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

4. 在主应用中引入并使用 Vue Router

打开 src/main.js 文件，并将 Vue Router 引入到你的 Vue 应用中：

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

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

5. 配置你的 App 组件

最后，确保你的 App.vue 组件中有 <router-view>，它将用来显示匹配到的路由组件：

//src/app.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

<style>
nav {
  padding: 1em;
}
nav a {
  margin: 0 10px;
  text-decoration: none;
}
</style>

6. 启动开发服务器

现在，你可以启动你的 Vue 应用，并测试路由是否正常工作：

npm run serve