Vue.js 路由简介
Vue Router 是 Vue.js 官方的路由管理器，允许我们在 Vue 应用中实现客户端路由。它使我们可以创建多个页面或视图，并在用户导航时保持单页应用程序的感觉。
目录结构
一个典型的 Vue.js 项目目录结构（包括 Vue Router）如下所示：
my-vue-app/ ├── node_modules/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── assets/ │ ├── components/ │ │ ├── Home.vue │ │ ├── About.vue │ │ └── ... │ ├── router/ │ │ └── index.js │ ├── views/ │ │ ├── HomeView.vue │ │ ├── AboutView.vue │ │ └── ... │ ├── App.vue │ ├── main.js │ └── ... ├── .gitignore ├── babel.config.js ├── package.json ├── README.md └── vue.config.js
关键文件和文件夹
- public/：包含静态文件，如 index.html。
- src/：包含源代码。
- assets/：存放静态资源（如图片、字体等）。
- components/：存放 Vue 组件。
- router/：存放路由配置文件。
- index.js：定义路由和路由规则。
- views/：存放视图组件（通常是页面级组件）。
- App.vue：根组件。
- main.js：入口文件，初始化 Vue 实例并挂载到 DOM。
实现基本的路由
下面是实现基本路由的步骤：
1. 安装 Vue Router
首先，需要安装 Vue Router：
npm install vue-router
2. 配置路由
创建并配置路由文件 src/router/index.js：
import Vue from 'vue'; import VueRouter from 'vue-router'; import HomeView from '../views/HomeView.vue'; import AboutView from '../views/AboutView.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/about', name: 'About', component: AboutView } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router;
3. 创建视图组件
在 src/views/ 目录下创建视图组件 HomeView.vue 和 AboutView.vue。
HomeView.vue：
<template> <div> <h1>Home Page</h1> <p>Welcome to the home page.</p> </div> </template> <script> export default { name: 'HomeView' }; </script> <style scoped> /* Add your styles here */ </style>
AboutView.vue：
<template> <div> <h1>About Page</h1> <p>This is the about page.</p> </div> </template> <script> export default { name: 'AboutView' }; </script> <style scoped> /* Add your styles here */ </style>
4. 修改 main.js
在 src/main.js 中引入并使用路由：
import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app');
5. 更新根组件 App.vue
修改 src/App.vue 以包含路由视图和导航链接：
<template> <div id="app"> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </nav> <router-view/> </div> </template> <script> export default { name: 'App' }; </script> <style> /* Add your styles here */ </style>
6. 启动开发服务器
最后，启动开发服务器并查看效果：
npm run serve
打开浏览器访问 http://localhost:8080，你应该能够看到首页和关于页面，并可以通过导航链接在它们之间切换。
通过这些步骤，你已经创建了一个包含 Vue Router 的基本 Vue.js 应用程序。你可以根据需要添加更多的路由和组件，以构建更加复杂和功能丰富的应用。希望这篇文章能帮助你快速入门并分享 Vue.js 路由的知识。
