网站界面要素,通州顺德网站建设,企业建站公司实力对比,哈尔滨网站开发公司代码获取
vue-router_ vue3路由管理器
⼀、基本介绍
1. 单⻚应⽤程序介绍
1.1 概念
单⻚应⽤程序#xff1a;SPA(Single Page Application)是指所有的功能都在⼀个HTML⻚⾯上实现
1.2 具体⽰例
单⻚应⽤⽹站#xff1a; ⽹易云⾳乐 https://music.163.com/
多⻚应⽤⽹…代码获取
vue-router_ vue3路由管理器
⼀、基本介绍
1. 单⻚应⽤程序介绍
1.1 概念
单⻚应⽤程序SPA(Single Page Application)是指所有的功能都在⼀个HTML⻚⾯上实现
1.2 具体⽰例
单⻚应⽤⽹站 ⽹易云⾳乐 https://music.163.com/
多⻚应⽤⽹站 京东 https://jd.com/
1.3 单⻚应⽤ VS 多⻚应⽤
开发分类实现方式页面性能开发效率用户体验学习成本首屏加载SEO单页一个 Html 页面按需更新性能高高非常好高慢差多页多个 Html 页面整页更新性能低中等一般中等快优
单⻚应⽤类⽹站系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点
多⻚应⽤类⽹站公司官⽹ / 电商类⽹站
1.4 总结
什么是单⻚⾯应⽤程序?
答所有的功能都在⼀个html⻚⾯上
单⻚⾯应⽤优缺点?
答1、优点体验好、开发效率⾼
2、缺点⾸屏加载相对较慢、不利于SEO
单⻚应⽤场景
答 系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点
2. 路由介绍
2.1 路由的介绍
⽣活中的路由设备和ip的映射关系
Vue中的路由路径和组件的映射关系
单⻚⾯应⽤程序, 之所以开发效率⾼, 性能好, ⽤⼾体验好 最⼤的原因就是: ⻚⾯按需更新
⽐如当点击【发现⾳乐】和【关注】时, 只是局部更新内容, 对于头部是不更新的要按需更新, ⾸先就需要明确: 访问路径 和 组件的对应关系访问路径和⻚⾯的对应关系如何确定呢 路由
2.2 如何实现路由
借助 vue3 的好基友 vue-router, 当修改地址栏路径时切换显⽰的组件
2.3 介绍vue-router
官网
2.4 总结
什么是路由
答⼀种映射(对应)关系
Vue中的路由是什么
答路径和⻚⾯的映射关系
vue-router是什么
答vue的官⽅路由
3. 组件存放⽬录
3.1 组件分类
⼈为的把 .vue ⽂件分为两类, 仅仅是为了便于理解和管理, 但⼆者本质⽆区别 ⻚⾯组件: 配合路由切换, 展⽰整个⻚⾯, 不复⽤的• 复⽤组件: ⽤于组装⻚⾯组件, 可复⽤的
3.2 存放⽬录
⻚⾯组件 - ⻚⾯展⽰ - 配合路由使⽤
放置在 src/views ⽬录下
复⽤组件 - ⽤于组装⻚⾯组件
放置在 src/components ⽬录下
3.3 总结
组件分为哪两类分类的⽬的
答⻚⾯组件、复⽤组件; 便于管理
不同分类的组件应该放在什么⽂件夹作⽤分别是什么
答 1、 ⻚⾯组件 - src/views - 配合路由切换
2、 复⽤组件 - src/components - 组装⻚⾯组件
⼆、基本使⽤和模块封装
1. 基本使⽤(42)
1.1 四个固定步骤
如下4个固定的步骤
下载 VueRouter 模块
yarn add vue-router导⼊相关函数
import { createRouter, createWebHashHistory } from vue-router创建路由实例
const router createRouter({// 哈希模式, 路径带 #history: createWebHashHistory(),routes: [// 路由表规则, 即 path 与 component 的对应关系]
})注册, 将路由实例注册到应⽤中, 让规则⽣效
app.use(router)当完以上 4 步之后, 就可以看到浏览器地址栏中的路径变成了 /#/的形式。
表⽰项⽬的路由已经被 Vue-Router 管理了 1.2 两个核⼼步骤
views⽬录下, 创建需要的⻚⾯组件并配置路由规则 views/Find.vue
script setup/scripttemplatediv classfindp发现⾳乐/pp发现⾳乐/pp发现⾳乐.../p/div
/templatestyle scoped/styleviews/My.vue
script setup/scripttemplatediv classmyp我的⾳乐/pp我的⾳乐/pp我的⾳乐.../p/div
/templatestyle scoped/styleviews/Friend.vue
script setup/scripttemplatediv classfriendp朋友/pp朋友/pp朋友.../p/div
/templatestyle scoped/stylemain.js
// 导⼊两个相关函数
// createRouter(): 创建路由实例
// createWebHashHistory(): 创建哈希模式的路由, 路径带 #
import { createRouter, createWebHashHistory } from vue-router// 导⼊ 3 个⻚⾯组件
import Find from /views/Find.vue
import Friend from /views/Friend.vue
import My from /views/My.vue// 创建路由实例
const router createRouter({history: createWebHashHistory(),routes: [{path: /find,component: Find}, {path: /my,component: My}, {path: /friend,component: Friend}]
})// 注册
app.use(router)给路由出⼝(路径匹配的组件, 显⽰的位置)
App.vue
script setup/script
template!-- 路由出⼝ --router-view /
/template1.3 路由运作原理
当浏览器url改变时, 匹配路由表数组中的path值如果命中了
则把相应的component渲染到 router-view / 的位置否则显⽰空⽩
1.4 总结
如何实现 路径改变对应组件 切换,应该使⽤哪个插件?
答 vue-router
vue-router的使⽤步骤是什么(42)?
答下载-导⼊-创建-注册- 配置规则表-给出⼝
2. 抽离封装路由模块
2.1 问题
路由配置代码都写在 main.js 中合适吗显然不合适, 会让 main.js 代码变得臃肿
2.2 ⽬标
将路由模块抽离出来。 好处利于管理和维护 2.3 代码⽰例
新建 router/index.js
// 添加路由功能配置
import { createRouter, createWebHashHistory } from vue-router;
// 注意: 脚⼿架环境下 代指 src ⽬录可以⽤于快速引⼊组件
// 导入 3 个页面组件
import Find from /views/Find.vue;
import Friend from /views/Friend.vue;
import My from /views/My.vue;// 创建路由实例
const router createRouter({history: createWebHashHistory(),routes: [{path: /find,component: Find},{path: /friend,component: Friend},{path: /my,component: My}]
})
// 导出路由实例
export default router;main.js
import App from ./App.vue;
import { createApp } from vue;
import router from ./router/index.js;// 创建应用实例
const app createApp(App);// 注册
app.use(router);app.mount(#app);2.4 总结
封装抽离路由模块的好处是什么
答便于管理、维护
以后如何快速引⼊组件
答可以借助 代指 src ⽬录
三、声明式导航与传参
1. 声明式导航
1.1 问题
要⼿动输⼊地址切换⻚⾯不合理吧能否点击链接进⾏跳转
1.2 解决⽅案
vue-router 提供了⼀个全局组件 router-link, ⽤于点击跳转需添加 to 属性指定路径 ,
其本质还是 a 标签
语法 router-link to“path值” xxx /router-link
!-- App.vue --script setup/script
templatenavrouter-link to/find发现⾳乐/router-linkrouter-link to/my我的⾳乐/router-linkrouter-link to/friend朋友/router-link/nav!-- ⼀级路由出⼝ --router-view /
/template
style
nav a {color: #333;text-decoration: none;
}nav a:nth-child(2) {margin: 0 80px;
}nav a.router-link-active {background: red;color: #fff;
}
/style
1.3 ⾃带⾼亮类名
使⽤router-link跳转后我们发现。当前点击的链接默认加了两个class的值router-link-exact-active 和 router-link-active ,
我们可以给任意⼀个class属性添加⾼亮样式即可实现功能
1.4 总结
router-link是什么
答 声明式导航 , 点击跳转路由的
router-link怎么⽤
答添加 to 属性
router-link的好处是什么
答⾃带 激活类名 , ⽅便实现⾼亮样式
2. 两个类名
当我们使⽤跳转时⾃动给当前导航加了两个类名 2.1 router-link-active
模糊匹配
只要是以/find开头的路径都可以和 to/find匹配到
2.2 router-link-exact-active
精确匹配
to“/find” 仅可以匹配 /find
2.3 总结
router-link 会⾃动给当前导航添加两个类名有什么区别呢
答1、 router-link-active : 模糊匹配
2、 router-link-exact-active : 精确匹配
3. 声明式导航-传查询参
3.1 ⽬标
在跳转路由时进⾏传参, ⽐如现在我们在发现⾳乐⻚, 点击去朋友⻚, 并携带id, ⽅便后续查询详情,
如何传参
3.2 跳转传参
我们可以通过两种⽅式在跳转的时候把所需要的参数传到其他⻚⾯中 查询参数传参 动态路由传参
3.3 查询参数传参
传参(有2种格式)
a. 字符串
router-link to/path?参数名值 xxx /router-linkb. 对象 router-link :to{path: /path,query: {参数名: 值...}} xxx /router-link3.4 代码⽰例
App.vue !-- 字符串 --router-link to/friend?id10086 朋友 /router-link!-- 对象 --router-link :to{path: /friend,query: {id: 10086}} 朋友 /router-linkFriend.vue
script setup
import { useRoute } from vue-router
const route useRoute()
console.log(route.query.id)
/script3.5 总结
路由查询参数如何传递
答字符串: “/path?参数名值” 或 对象: pathquery
查询参如何接收
答 route.query.参数名
4. 声明式导航-传动态参
4.1 动态路由传参⽅式 配置动态路由 动态路由后⾯的参数可以随便起名但要有语义
routes: [{path: /find/:id,component: Find}
]传递参数(有2种格式)
a. 字符串
router-link to/path/具体值 xxx /router-linkb. 对象 router-link :to{name: Friend,params: {参数名: 具体值}} xxx /router-link接收参数
script setupimport { useRoute } from vue-routerconst route useRoute()// 获取动态路由参数console.log(route.params)
/script4.2 总结
路由动态参数如何传递
答1、 /:参数名 先占位
2、 字符串: “/path/具体值” 或 对象: nameparams
查询参如何接收
答 route.params.参数名
5. 查询参 VS 动态参
5.1 对⽐
查询参数传参 (⽐较适合传多个参数)
a. 跳转to“/path?参数名值参数名2值”
b. 获取route.query.参数名
动态路由传参 (优雅简洁传单个参数⽐较⽅便)
a. 配置动态路由path: “/path/:参数名”
b. 跳转to“/path/参数值”
c. 获取route.params.参数名
注意动态路由也可以传多个参数但⼀般只传⼀个
四、更多配置
1. 重定向
1.1 问题
⽹⻚打开时, url 默认是 / 路径, 未匹配到组件时, 会出现空⽩
1.2 解决⽅案
重定向: 匹配 / 后, ⽐如强制跳转 /find 路径, 避免⻚⾯空⽩
1.3 语法
{ path: 匹配路径, redirect: 要重定向的路径 }1.4 代码⽰例
// 访问 / , ⾃动跳转到 /find
{ path: /, redirect: /find},2. 404
2.1 作⽤
当路径找不到匹配时给个提⽰⻚⾯
2.2 位置
404的路由虽然配置在任何⼀个位置都可以但⼀般都配置在其他路由规则的最后⾯
2.3 语法
path: “*” (任意路径) ‒ 前⾯不匹配就命中最后这个
2.4 代码
views/404.vue
script setup/scripttemplatedivh3404/h3p 你访问的⻚⾯去了⽉球 /prouter-link to/ 去⾸⻚ /router-link/div
/templaterouter/index.js
// 添加路由功能配置
import { createRouter, createWebHashHistory } from vue-router;import _404 from /views/404.vue;
// 创建路由实例
const router createRouter({history: createWebHashHistory(),routes: [...,{path: /:pathMatch(.*)*,component: _404}]
})
// 导出路由实例
export default router;3. 模式
3.1 问题
路由的路径看起来不好看, 有#, 能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:5173/#/find
history路由(常⽤) 例如: http://localhost:8080/find (上线需要服务器端⽀持开发环境Vite给规避掉了history模式的问题)
3.2 语法
// 添加路由功能配置
import { createRouter, createWebHashHistory,createWebHistory } from vue-router;// 创建路由实例
const router createRouter({// history: createWebHashHistory(), // hash 模式 URL 地址带 # 号history: createWebHistory(), // history 模式 URL 地址不带 # 号routes: [...]
})
// 导出路由实例
export default router;五、编程式导航与传参
1. 编程式导航
1.1 问题
如何主动做路由跳转⽐如登录成功⾃动跳转⾄⾸⻚
1.2 解决⽅案
编程式导航 ⽤JS代码来进⾏跳转
1.3 语法
路由实例 router.push(路径)
script setupimport { useRouter } from vue-routerconst router useRouter()router.push(字符串)router.push(对象)
/script1.4 代码⽰例
Find.vue
script setup
import { useRouter } from vue-router;
import { onMounted } from vue;
// 组件挂载后, 延迟 2 秒, 自动跳转到 find
const router useRouter();
onMounted(() {setTimeout(() {// 1. 通过 router.push() 方法跳转到 findrouter.push(/find);// 2. 对象// router.push({ path: /find });// 3. 命名路由// router.push({ name: find });}, 2000);
});
/scripttemplatediv classfriendp朋友/pp朋友/pp朋友.../p/div
/templatestyle scoped/style1.5 总结
编程式导航如何做路由跳转
答 router.push(字符串/对象)
2. 编程式导航传参
2.1 问题
编程式导航如何传参呢
2.2 语法
与 声明式导航router-link 传参和接参⽅式完全⼀样既⽀持字符串, 也⽀持对象
router.push(/path?参数名值)router.push({path: /path,query{参数名: 值
...
}
})router.push({name: 路由名称,params: {参数名: 值}
})2.3 代码⽰例
2.3.1 查询参数
router/index.js
createRouter({routes: [{ path: /friend, component: Friend }]
})Find.vue
router.push(/friend?fid110)router.push({path: /friend,query: {fid: 101}
})Friend.vue
script setupimport {useRoute} from vue-routerconst route useRoute()console.log(route.query.fid)
/script2.3.2 动态参数
router/index.js
createRouter({routes: [{// 命名路由name: Friend,path: /friend/:id,component: Friend}]
})Find.vue
router.push({name: Friend,params: {id: 101}
})Friend.vue
script setup
import { useRoute } from vue-router
const route useRoute()
console.log(route.params.id)
/script2.4 总结
编程式导航如何传参和接参
答同声明式导航完全⼀样, router.push(字符串/对象)
六、嵌套与守卫
1. 嵌套
1.1 问题
能否在⼀个路由⻚⾯中再进⾏⼀套路由的切换呢⽐如 ⽹易云⾳乐 的发现⾳乐⻚
1.2 效果图 1.3 步骤 创建3个⼆级路由⻚⾯组件(Recommend、Ranking、SongList) 路由表数组中, 在相应的⼀级路由规则中, 配置 children 规则 在相应的⼀级路由⻚⾯组件中, 给⼆级路由 出⼝和导航链接
注意
1、 ⼆级路由的 path 推荐 不加 /
2、 做路由跳转的时候要写 完整路径(⽗路径当前路径)
3、 防⽌⼆级路由⻚⾯空⽩, 给默认显⽰的⼀级路由 添加重定向
1.4 代码⽰例
views/Recommend.vue
script setup/scripttemplatediv classrecommendh5推荐/h5h5推荐/h5h5推荐/h5/div
/templatestyle scoped/styleviews/Ranking.vue
script setup/scripttemplatediv classrankingh5排⾏榜/h5h5排⾏榜/h5h5排⾏榜/h5/div
/templatestyle scoped/styleviews/SongList.vue
script setup/scripttemplatediv classsonglisth5歌单/h5h5歌单/h5h5歌单/h5/div
/templatestyle scoped/stylerouter/index.js
// 添加路由功能配置
import { createRouter, createWebHashHistory, createWebHistory } from vue-router;
// 注意: 脚⼿架环境下 代指 src ⽬录可以⽤于快速引⼊组件
// 导入 3 个页面组件
import Find from /views/Find.vue;
import Friend from /views/Friend.vue;
import My from /views/My.vue;
import _404 from /views/404.vue;
import Recommend from /views/Recommend.vue;
import SongList from /views/SongList.vue;
import Ranking from /views/Ranking.vue;
// 创建路由实例
const router createRouter({// history: createWebHashHistory(), // hash 模式 URL 地址带 # 号history: createWebHistory(), // history 模式 URL 地址不带 # 号routes: [{path: /,redirect: /find},{path: /find,component: Find,// 重定向, 防⽌⼆级路由空⽩redirect: /find/recommend,// 嵌套路由children: [{path: recommend,component: Recommend},{path: ranking,component: Ranking},{path: songList,component: SongList},]},{path: /friend,component: Friend},{path: /my,component: My},{path: /:pathMatch(.*)*,component: _404}]
})
// 导出路由实例
export default router;views/Find.vue
script setup/script
templatediv classrouter2navrouter-link to/find/recommend推荐/router-linkrouter-link to/find/ranking排行榜/router-linkrouter-link to/find/songList歌单/router-link/nav!-- 二级路由 --router-view //div/template
style scoped.router2 {padding: 20px;background: #5177c7;
}nav a {color: #333;text-decoration: none;
}nav a:nth-child(2) {margin: 0 80px;
}nav a.router-link-active {background: red;color: #fff;
}
/style1.5 总结
如何配置路由嵌套
答配 children 给路由 出⼝router-view/
需要注意什么
答⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向
2. 路由守卫
2.1 问题
能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问
2.2 解决⽅案
路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数
router.beforeEach((to, from) {// to: 即将要进⼊的路由// from: 当前正要离开的路由// false 取消导航(不发⽣跳转)return false// 正常放⾏、正常跳转return undefined | true// 重定向到指定的路由return /路径
})2.3 代码⽰例
// ⽤来模拟是否登录
const isLogin true
router.beforeEach((to, from) {// 如果没有登录, 并且还要去 我的⾳乐⻚if (!isLogin to.path /my) {// 进⾏提⽰alert(请先登录)// 不放⾏(不跳转)return false}// 正常放⾏return true
})2.4 总结
如何在访问路由前添加权限校验
答 全局前置守卫 router.beforeEach((to, from) { })
参数 to、from 和 回调函数返回值 都表⽰什么
to即将进⼊的路由
from正要离开的路由
回调函数返回值return false: 不放⾏return true/undefined: 放⾏return 路径: 重定向到指定路由nav a.router-link-active { background: red; color: #fff; } #### 1.5 总结1. 如何配置路由嵌套 答配 children 给路由 出⼝\router-view/2. 需要注意什么 答⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向### 2. 路由守卫#### 2.1 问题能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问#### 2.2 解决⽅案路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数js
router.beforeEach((to, from) {// to: 即将要进⼊的路由// from: 当前正要离开的路由// false 取消导航(不发⽣跳转)return false// 正常放⾏、正常跳转return undefined | true// 重定向到指定的路由return /路径
})2.3 代码⽰例
// ⽤来模拟是否登录
const isLogin true
router.beforeEach((to, from) {// 如果没有登录, 并且还要去 我的⾳乐⻚if (!isLogin to.path /my) {// 进⾏提⽰alert(请先登录)// 不放⾏(不跳转)return false}// 正常放⾏return true
})2.4 总结
如何在访问路由前添加权限校验
答 全局前置守卫 router.beforeEach((to, from) { })
参数 to、from 和 回调函数返回值 都表⽰什么
to即将进⼊的路由
from正要离开的路由
回调函数返回值return false: 不放⾏return true/undefined: 放⾏return 路径: 重定向到指定路由
