vue3vue-router

### Vue 3 结合 vue-router 使用指南 #### 安装依赖包 为了使 Vue 3 应用程序能够使用 `vue-router` 进行路由管理，需先安装必要的 npm 包。 ```bash npm install vue@next vue-router@4 ``` #### 创建路由器实例 创建一个新的 JavaScript 文件来定义应用程序的路由逻辑。通常命名为 `router/index.js` 或者类似的名称： ```javascript 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; ``` 这段代码展示了如何设置基本路径以及关联视图组件到特定 URL 路径上[^1]。 #### 主应用入口配置 在项目的主文件（通常是 `main.js`），需要导入并使用刚刚创建好的路由器实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这一步骤确保了整个应用程序都可以访问由 `vue-router` 提供的功能和服务。 #### 页面布局与导航链接 为了让页面之间可以相互跳转，在模板中可以通过 `<router-link>` 组件实现内部链接功能，并通过 `<router-view>` 来显示当前匹配的内容区域。 ```html <template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <!-- 动态加载对应于当前URL地址所指向的组件 --> <router-view></router-view> </template> ``` 此部分说明了怎样利用这些内置标签构建简单的单页应用(SPA)，从而让用户无需刷新浏览器即可浏览不同页面。