7.1 路由简介
1 什么是路由？
- 定义：路由就是根据不同的 URL 地址展示不同的内容或页面。
- 通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。
2 路由的作用
- 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
- 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
- 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。
7.2 路由入门案例
1 案例需求分析
2 创建项目和导入路由依赖
npm create vite //创建项目cd 项目文件夹 //进入项目文件夹 npm install //安装项目需求依赖 npm install vue-router@4 --save //安装全局的vue-router 4版本
3 准备页面和组件
- components/Home.vue
<script setup> </script> <template> <div> <h1>Home页面</h1> </div> </template> <style scoped> </style>
- components/List.vue
<script setup> </script> <template> <div> <h1>List页面</h1> </div> </template> <style scoped> </style>
- components/Add.vue
<script setup> </script> <template> <div> <h1>Add页面</h1> </div> </template> <style scoped> </style>
- components/Update.vue
<script setup> </script> <template> <div> <h1>Update页面</h1> </div> </template> <style scoped> </style>
- App.vue
<script setup> </script> <template> <div> <h1>App页面</h1> <hr/> <!-- 路由的连接 --> <router-link to="/">home页</router-link> <br> <router-link to="/list">list页</router-link> <br> <router-link to="/add">add页</router-link> <br> <router-link to="/update">update页</router-link> <br> <hr/> <!-- 路由连接对应视图的展示位置 --> <hr> 默认展示位置:<router-view></router-view> <hr> Home视图展示:<router-view name="homeView"></router-view> <hr> List视图展示:<router-view name="listView"></router-view> <hr> Add视图展示:<router-view name="addView"></router-view> <hr> Update视图展示:<router-view name="updateView"></router-view> </div> </template> <style scoped> </style>
4 准备路由配置
- src/routers/router.js
// 导入路由创建的相关方法 import {createRouter,createWebHashHistory} from 'vue-router' // 导入vue组件 import Home from '../components/Home.vue' import List from '../components/List.vue' import Add from '../components/Add.vue' import Update from '../components/Update.vue' // 创建路由对象,声明路由规则 const router = createRouter({ //createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。在使用这种模式下，路由信息保存在 URL 的 hash 中， //使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。在 Vue.js 应用中， //通常使用该方法来创建路由的历史记录对象。 //就是路由中缓存历史记录的对象，vue-router提供 history: createWebHashHistory(), routes:[ { path:'/', /* component指定组件在默认的路由视图位置展示 components:Home components指定组件在name为某个值的路由视图位置展示 components:{ default:Home,// 默认路由视图位置 homeView:Home// name为homeView的路由视图位置 } */ components:{ default:Home, homeView:Home } }, { path:'/list', components:{ listView : List } }, { path:'/add', components:{ addView:Add } }, { path:'/update', components:{ updateView:Update } }, ] }) // 对外暴露路由对象 export default router;
5 main.js引入router配置
- 修改文件：main.js (入口文件)
import { createApp } from 'vue' import './style.css' import App from './App.vue' //导入router模块 import router from './routers/router.js' let app = createApp(App) //绑定路由对象 app.use(router) //挂在试图 app.mount("#app")
6 启动测试
npm run dev
7.3 路由重定向
重定向的作用：将一个路由重定向到另一个路由上
- 修改案例：访问/list和/showAll都定向到List.vue
- router.js
// 导入路由创建的相关方法 import {createRouter,createWebHashHistory} from 'vue-router' // 导入vue组件 import Home from '../components/Home.vue' import List from '../components/List.vue' import Add from '../components/Add.vue' import Update from '../components/Update.vue' // 创建路由对象,声明路由规则 const router = createRouter({ history: createWebHashHistory(), routes:[ { path:'/', components:{ default:Home, homeView:Home } }, { path:'/list', components:{ listView : List } }, { path:'/showAll', // 重定向 redirect :'/list' }, { path:'/add', components:{ addView:Add } }, { path:'/update', components:{ updateView:Update } }, ] }) // 对外暴露路由对象 export default router;
- App.vue
<script setup> </script> <template> <div> <h1>App页面</h1> <hr/> <!-- 路由的连接 --> <router-link to="/">home页</router-link> <br> <router-link to="/list">list页</router-link> <br> <router-link to="/showAll">showAll页</router-link> <br> <router-link to="/add">add页</router-link> <br> <router-link to="/update">update页</router-link> <br> <hr/> <!-- 路由连接对应视图的展示位置 --> <hr> 默认展示位置:<router-view></router-view> <hr> Home视图展示:<router-view name="homeView"></router-view> <hr> List视图展示:<router-view name="listView"></router-view> <hr> Add视图展示:<router-view name="addView"></router-view> <hr> Update视图展示:<router-view name="updateView"></router-view> </div> </template> <style scoped> </style>
