单页应用和多页应用
单页面应用:所有功能在一个页面上实现
一个.html 文件
前端路由
组件化开发
网易云音乐 小米移动端 多页应用:与单页应用相对应的,不同的功能通过不同的页面来实现
单页面 - 多页面对比
路由
vue 路由官网
路由理解的概念
路由:就是一一对应关系的集合。
前端路由(单页应用程序): 一个 url 地址,对应哪个组件 后端路由:一个接口地址,对应哪一段接口地址
前端路由
后端路由
前端路由工作原理
前端路由的本质,对 url 的 hash 值进行改变和监听,切换对应页面组件的 dom 结构
分析
根据地址栏变化(不重新向服务器发请求),去局部更新不同的页面内容,完成前端业务场景切换
思路
URL 地址栏中的 Hash 值发生了变化
前端 js 监听了到 Hash 地址的变化 window.οnhashchange=()=>{}
前端 js 把当前 Hash 地址对应的组件渲染都浏览器中
前端路由简单实现
1 . src/views/ 创建并在 App.vue 里导入和注册组件 MyHome.vue MyMovie.vue MyAbout.vue
复制代码
通过动态组件,控制要显示的组件
App组件
复制代码
声明三个导航链接,点击时修改地址栏的 hash 值
路由 - 官方路由基本使用
vue-router 文档
说明⚠️:如果使用 vue-cli 创建项目,没有选择路由插件,需要单独安装和配置
步骤
安装包
配置路由
使用路由
操作
安装 npm i vue-router@3.5.3
创建路由文件
router/index.js
// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'
// 使用插件 - 重要
Vue.use(VueRouter)
// 导入组件
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'
// 创建路由规则
const router = new VueRouter({
routes: [
{
path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时,
component: Page1 // 装入组件 Page1
},
{
path: "/page2",
component: Page2
},
{
path: "/page3",
component: Page3
}
]
})
export default router
复制代码
使用路由 在 main.js 中
import router from './router/index.js'
new Vue({
router: router, // 使用路由
render: h => h(App),
}).$mount('#app')
复制代码
使用路由
复制代码
测试
在地址栏中输入地址来访问
图示
小结
下载路由模块,编写对应规则注入到 vue 实例上,使用 router-view 挂载点显示切换的路由
链接导航 - router-link
掌握 router-link 的用法
Router-link 组件介绍
作用: 用于提供路由链接,实现页面跳转 格式: 首页 要点:
是 vue-router 提供的组件
router-link 最终会渲染成 a 链接
router-link 自带链接导航高亮的功能
示例
App组件
- 首页
- 电影
- 关于
小结
链接导航,用 router-link 配合 to, 实现点击切换路由
router-link 组件会被 vue 解析成 a 标签,但不能直接通过 a 标签来跳转。
如果当前路由被激活会添加特殊的类名:
页面跳转传参
掌握跳转传参的方式
回顾
html 页面之间如何传参? =》url?key=val&key=val
vue 路由传参的方式
两种方式:
1.query 传参。 适用场景:页面搜索
2.params 传参。 适用场景:详情页
创建 components/MyGoods.vue - 准备接收路由上传递的参数和值
- 外套
- 详情
- 复制代码 图示 - 查询字符串
图示 - params 传参
小结
?key=value =》 用 route.query.key 取值 / 值−需要提前在路由规则 /path/:key=》 用 route.query.key 取值 / 值 - 需要提前在路由规则 /path/:key =》 用 route.query.key 取值 / 值−需要提前在路由规则 /path/:key=》 用 route.params.key 取值路由 - 重定向
掌握路由重定向的用法理解
重定向, 用户访问的是 A 地址,系统把它切换到 B 地址。应用场景:改变默认访问页面的行为
示例
在 router/index.js - 修改配置const routes = [
{
path: “/”,
redirect: “/home” // 重定向
}
]
复制代码
路由 404
统一处理异常地址:那些个正常配置的地址之外的地址。代码
修改路由规则即可:通过通配符 *,设置 404 页面
import NotFound from “@/components/NotFound”;
const routes = [
{
path: “/”,
redirect: “/home” // 重定向
},// …正常路由
{ // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
path: “*”,
component: NotFound
}
]
复制代码
编程式导航
掌握编程式导航的使用。编程式导航
编程式: 写代码 导航:页面跳转编程式导航 ====> 写代码的方式来让页面跳转
API
// 跳转页面不传参
this. r o u t e r . p u s h ( ′ / 路 由 路 径 ′ ) t h i s . router.push('/路由路径') this. router.push(′/路由路径′)this.router.push({path: ‘路由路径’})
this.$router.push({name: ‘路由名称’})// 跳转并query传参-方式1
this.KaTeX parse error: Expected 'EOF', got '&' at position 26: …h("/路由路径?参数1=值1&̲参数2=值2") // 跳转并…router.push({
path: “路由路径”,
query: {
“参数1”:值1,
“参数2”:值2
}
})// 跳转并params传参-方式1
this. r o u t e r . p u s h ( " / 路 由 路 径 / 值 1 / 值 2 " ) / / 跳 转 并 p a r a m s 传 参 − 方 式 2 t h i s . router.push("/路由路径/值1/值2") // 跳转并params传参-方式2 this. router.push("/路由路径/值1/值2")//跳转并params传参−方式2this.router.push({
name: “路由名称”,
params: {
“参数1”:值1,
“参数2”:值2
}
})// 后退
$router.back()
复制代码
小结
路由嵌套
原理:router-view 中再次包含 router-view。 背景:一个组件内部包含的业务还是很复杂,需要再次进行拆分。 格式:routes:[ { path: '/page1', component: Page1, // 这个组件内部还有router-view children: [ { path:'', // path为空,表示当 #/page1时,显示 Page1组件+组件1 component: 组件1 // }, { path:'/xx1', // path以/开头,表示当 #/xx1时,显示 Page1组件+组件2 component: 组件2 }, { path:'xx2', // path以/开头,表示当 /page1/xx2时,显示 Page1组件+组件3 component: 组件3 } ] } ]
复制代码
示例总结:
在已有的路由容器中,再实现一套路由,再套一个路由容器,叫:嵌套路由。
嵌套路由除了 router-view 之间需要嵌套,路由规则也需要通过 children 来实现嵌套。
案例 - 模拟网易云音乐效果
二级路由示例 - 网易云音乐 - 发现音乐下思路:
创建路由需要的所有页面组件 => 两个一级路由和三个二级路由
src/views/MyMusic.vue -- 我的音乐页 - 1 src/views/FindMusic.vue -- 发现音乐页 - 2 src/views/Child/Recommend.vue -- 发现音乐页 / 推荐页面 - 2-1 src/views/Child/Ranking.vue -- 发现音乐页 / 排行榜页面 - 2-2 src/views/Child/SongList.vue -- 发现音乐页 / 歌单页面 - 2-3
router/index.js 中配置路由
一级路由 path 从 / 开始定义
二级路由 path 直接写名字或带上一级路由 path(在对应一级路由的 children 数组中配置)
设置默认显示某个二级路由,path 和一级路由保持一致或为空import Vue from 'vue' import VueRouter from 'vue-router' // 一级路由 import FindMusic from '@/views/FindMusic' import MyMusic from '@/views/MyMusic' // 二级路由 import Recommend from '@/views/Child/Recommend' import Ranking from '@/views/Child/Ranking' import SongList from '@/views/Child/SongList' Vue.use(VueRouter) const routes = [ { path: "/", redirect: "/find" }, { path: "/find", // 一级路由 component: FindMusic, // find下的二级路由 children: [ { path: "/find", // 和父路由路径一样,默认加载这个路由 component: Recommend }, { path: "/find/ranking", component: Ranking }, { path: "/find/songlist", component: SongList } ] }, { path: "/my", component: MyMusic } ]; const router = new VueRouter({ routes })
export default router
复制代码
App.vue - 一级导航和路由展示
发现音乐 我的音乐复制代码
FindMusic.vue - 设置二级导航和二级路由显示位置
发现音乐 - 页面
推荐 排行榜 歌单复制代码
说明:App.vue, 外层的 router-view 负责发现音乐和我的音乐页面切换
FindMusic.vue 内层的 router-view 负责发现音乐下的子路由页面切换
全局前置守卫
目标:路由跳转之前,会触发一个函数语法:router.beforeEach((to, from, next) => {})
案例:在跳转路由前,判断用户登陆了才能去 <我的音乐> 页面,未登录弹窗提示回到发现音乐页面
实现:
在 router/index.js 路由对象上使用固定方法 beforeEach // 路由前置守卫 router.beforeEach((to, from, next) => { // to代表要跳转到哪个路径去, to的值是个对象可以打印看到 // from代表从哪个路径跳过去 console.log(to); console.log(from); // fullPath带?后面参数的, path是完整的路径 console.log("路由要跳转了"); // 模拟判断登录了没有, 登录后才能去我的音乐 let loginFlag = false; // 假设false代表未登录 if (to.path == "/my" && loginFlag == false) { // 如果去个人中心页面, 判断未登录, 提示登录(并强制跳转回find) alert("请先登录!"); next("/find"); } else { // 如果不去/my页面就直接跳转 next(); } });
复制代码
全局后置守卫
目标:路由跳转后,触发的函数语法:router.afterEach((to, from) => {})
使用:
router/index.js - 添加 router.afterEach((to, form) => { console.log(to); console.log(form); console.log("路由发生了跳转"); })
复制代码
路由模式设置
目标:修改路由在地址栏的模式模式文档
router/index.js
const router = new VueRouter({ routes, mode: "history" // 打包上线后需要后台支持 })
复制代码
history 和 hash 模式对比:
功能一样(跳转页面)
history 模式的 path 路径不带 #号,hash 有 #号
hash 模式兼容性好
示例
hash 路由例如: http://localhost:8081/#/homehistory 路由例如: http://localhost:8081/home