1.1 路由简介
1 什么是路由？
- 定义：路由就是根据不同的 URL 地址展示不同的内容或页面。
- 通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。
2 路由的作用
- 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
- 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
- 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。
3 Vue3的路由实现
- Vue Router 是 Vue.js 的官方路由
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
1.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
1.3 路由重定向
重定向的作用：将一个路由重定向到另一个路由上
- 语法:
{
path: "/接收路径",
redirect: "/重定向路径"
}
- 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>
1.4 编程式路由(useRouter)
普通路由
<router-link to="/list">list页</router-link>这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)
动态路由
- 通过useRouter,动态决定向那个组件切换的路由
- 在 Vue 3 和 Vue Router 4 中，你可以使用
useRouter来实现动态路由(编程式路由) - 这里的
useRouter方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。
语法:
1.添加动态路由函数 import {useRouter} from 'vue-router'
2.获取动态路由对象 let router = useRouter()
3.通过动态路由发起请求 router.push({path:'/list'})
案例需求: 通过在页面上输入路由路径动态显示目标组件
- App.vue
<script setup type="module">
import {useRouter} from 'vue-router'
import {ref} from 'vue'
//创建动态路由对象
let router = useRouter()
let routePath =ref('')
let showList= ()=>{
// 编程式路由
// 直接push一个路径
// router.push('/list')
// push一个带有path属性的对象
router.push({path:'/list'})
}
</script>
<template>
<div>
<h1>App页面</h1>
<hr/>
<!-- 路由的连接 -->
<!-- 动态输入路径,输入完毕后,根据输入的路径决定显示哪个组件 -->
<button @click="showList()">showList</button> <br>
<hr/>
<!-- 路由连接对应视图的展示位置 -->
<hr>
默认展示位置:<router-view></router-view>
</div>
</template>
<style scoped>
</style>
1.5 路由传参(useRoute)
路径参数
- 在路径中使用一个动态字段来实现，我们称之为 路径参数
- 例如： 查看数据详情
/showDetail/1,1就是要查看详情的id,可以动态添值！
- 例如： 查看数据详情
键值对参数
-
类似与get请求通过url传参,数据是键值对形式的
- 例如: 查看数据详情
/showDetail?hid=1,hid=1就是要传递的键值对参数
- 例如: 查看数据详情
-
在 Vue 3 和 Vue Router 4 中，你可以使用
useRoute这个函数从 Vue 的组合式 API 中获取路由对象。useRoute方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、查询参数等。
语法:
import {useRoute, useRouter} from "vue-router"
let route = reactive(useRoute())
console.log(route.params)
<template>
<div>
<h1>我是详情页面</h1>
//路径参数写法
{{ route.params.id }} ~~~~ {{ route.params.name }}
//请求参数写法
{{ route.query.id }} ~~~~ {{ route.query.name }}
</div>
</template>
案例需求 : 切换到ShowDetail.vue组件时,向该组件通过路由传递参数
- 修改App.vue文件
<script setup>
import {useRoute, useRouter} from 'vue-router'
let route = useRouter()
function sendMsg(id,name){
route.push(`/showDetail/${id}/${name}`)
}
function sendMsg2(id,name){
route.push(`/showDetail2?id=${id}&name=${name}`)
}
</script>
<template>
<div>
<!-- 1.路径参数 -->
<router-link to="/showDetail/1/java">路径参数传递-java</router-link><br>
<button @click="sendMsg(2,'mysql')">动态路由传递路径参数</button><br>
<!-- 2.请求参数写法 -->
<router-link to="/showDetail2?id=3&name=python">请求参数-python</router-link><br>
<button @click="sendMsg2(4,'tomcat')">动态路由请求参数写法</button>
<router-view></router-view>
</div>
</template>
<style scoped>
</style>
- 修改router.js增加路径参数占位符
import {createRouter,createWebHashHistory} from 'vue-router'
import ShowDetail from "../components/ShowDetail.vue"
import ShowDetail2 from "../components/ShowDetail2.vue"
const router = createRouter({
history: createWebHashHistory(),
routes: [
/* 通过:id :name指定变量名称 */
{path: "/showDetail/:id/:name", component: ShowDetail},
{path: "/showDetail2", component: ShowDetail2}
]
})
export default router
- ShowDetail.vue 通过useRoute获取路径参数
<script setup>
import {useRoute} from "vue-router"
let route = useRoute()
</script>
<template>
<div>
<h1>参数传递</h1>
<div>{{ route.params.id }} ~~~ {{ route.params.name }}</div>
</div>
</template>
<style scoped>
</style>
- ShowDetail2.vue通过useRoute获取键值对参数
<script setup>
import {useRoute} from "vue-router"
//通过路由对象获取参数
let route = useRoute()
</script>
<template>
<div>
<h1>参数传递</h1>
<div>{{ route.query.id }} ~~~ {{ route.query.name }}</div>
</div>
</template>
<style scoped>
</style>
1.6 路由守卫
在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：
- 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
- 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
- 守卫代码的位置: 在router.js中
//全局前置路由守卫
router.beforeEach( (to,from,next) => {
//to 是目标地包装对象 .path属性可以获取地址
//from 是来源地包装对象 .path属性可以获取地址
//next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
//next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
console.log(to.path,from.path,next)
//需要判断，否者无限重复定向
if(to.path === '/' || to.path === "/home"){
//程序放行
next()
}else{
//重定向到请求首页
next("/")
}
} )
//全局后置路由守卫
router.afterEach((to, from) => {
console.log(`Navigate from ${from.path} to ${to.path}`);
});