动力节点vue2+3视频课程
路由route
6.1 传统web应用vs单页面web应用
传统web应用
传统web应用,又叫做多页面web应用:核心是一个web站点由多个HTML页面组成,点击时完成页面的切换,因为是切换到新的HTML页面上,所以当前页面会全部刷新。
单页面web应用(SPA:Single Page web Application)
整个网站只有一个HTM页面,点击时只是完成当前页面中组件的切换。属于页面局部刷新。
单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。单页面的跳转仅刷新局部资源。因此,对单页应用来说模块化的开发和设计显得相当重要。
单页面应用的优点:
1、提供了更加吸引人的用户体验:具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端
单页面应用的缺点:
1、首次加载耗时比较多。
2、[SEO](https://so.csdn.net/so/search” /> 3、容易造成CSS命名冲突。
4、前进、后退、地址栏、书签等,都需要程序进行管理,页面的复杂度很高,需要一定的技能水平和开发成本高。
单页面和多页面的对比
目前较为流行的是单页面应用的开发。
如果想使用Vue去完成单页面应用的开发,需要借助Vue当中的路由机制。
6.2 路由route与路由器router
路由:route
路由器:router
每一个路由都由key和value组成。
key1+value1===>路由route1
key2+value2===>路由route2
key3+value3===>路由route3
…
路由的本质:一个路由表达了一组对应关系。
路由器的本质:管理多组对应关系。
Vue中路由的工作原理:
6.3 使用路由
- 实现功能描述
- 根据静态页面提取两个组件:Tea.vue和Fruit.vue
- vue-router也是一个插件,安装vue-router
- vue2要安装vue-router3
- npm i vue-router@3
- vu3要安装vue-router4
- npm i vue-router@4
- vue2要安装vue-router3
- main.js中引入并使用vue-router
- 导入:import VueRouter from ‘vue-router’
- 使用:Vue.use(VueRouter)
- new Vue时添加新的配置项:一旦使用了vue-router插件,在new Vue的时候可以添加一个全新的配置项:router
- router路由器的创建一般放在一个独立的js文件中,例如:router/index.js
- 创建router目录
- 创建index.js,在index.js中创建路由器对象,并且将其暴露。然后在main.js文件中引入该路由器即可。
- 使用router-link标签代替a标签(App.vue中)
router-link标签最终编译之后的还是a标签。vue-router库帮助我们完成的。
- 添加激活样式
使用active-class属性,在激活时添加样式:selected
- 指定组件的最终显示位置。
- 测试
注意事项:
- 路由组件一般会和普通组件分开存放,路由组件放到pages目录,普通组件放到components目录下。
- 路由组件在进行切换的时候,切掉的组件会被销毁。
- 路由组件实例比普通组件实例多两个属性:route和route和 route和router
- $route:属于自己的路由对象。
- $router:多组件共享的路由器对象。
6.4 多级路由
- 要实现的效果
- 主要实现
6.5 路由query传参
为了提高组件的复用性,可以给路由组件传参。
怎么传?
怎么接?
6.6 路由起名字
可以给路由起一个名字,这样可以简化to的编写。
怎么起名?
怎么使用?必须使用 :to=”{}” 的方式
6.7 路由params传参
怎么接?
怎么传?
需要注意的是,如果采用params传参,使用:to的时候,只能用name,不能用path。
6.8 路由的props
props配置主要是为了简化query和params参数的接收。让插值语法更加简洁。
第一种实现方式:
第二种实现方式:函数式
第三种实现方式:直接将params方式收到的数据转化为props
6.9 router-link的replace属性
- 栈数据结构:先进后出,后进先出原则。
- 浏览器的历史记录是存储在栈这种数据结构当中的。包括两种模式:
- push模式(默认的)
- replace模式
- 如何开启replace模式:
6.10 编程式路由导航
需求中可能不是通过点击超链接的方式切换路由,也就是说不使用如何实现路由切换。可以通过相关API来完成:
- push模式:
- this.$router.push({
name : ‘’,
query : {}
})
- replace模式:
- this.$router.replace({
name : ‘’,
query : {}
})
- 前进:
- this.$router.forward()
- 后退:
- this.$router.back()
- 前进或后退几步:
- this.$router.go(2) 前进两步
- this.$router.go(-2) 后退两步
- 使用编程式路由导航的时候,需要注意:重复执行push或者replace的API时,会出现以下错误:
这个问题是因为push方法返回一个Promise对象,期望你在调用push方法的时候传递两个回调函数,一个是成功的回调,一个是失败的回调,如果不传就会出以上的错误。所以解决以上问题只需要给push和replace方法在参数上添加两个回调即可。
6.11 缓存路由组件
默认情况下路由切换时,路由组件会被销毁。有时需要在切换路由组件时保留组件(缓存起来)。
这里的组件名称指的是:
不写include时:包含的所有路由组件全部缓存。
如何指定多个缓存路由,可以使用数组形式:
6.12 activated和deactivated
这是两个生命周期钩子函数。
只有“路由组件”才有的两个生命周期钩子函数。
路由组件被切换到的时候,activated被调用。
路由组件被切走的时候,deactivated被调用。
这两个钩子函数的作用是捕获路由组件的激活状态。
6.13 路由守卫
6.13.1 全局前置守卫
router/index.js文件中拿到router对象。
router.beforeEach((to, from, next)=>{ // 翻译为:每次前(寓意:每一次切换路由之前执行。)
// to 去哪里(to.path、to.name)
// from 从哪来
// next 继续:调用next( )
})
这种路由守卫称为全局前置路由守卫。
初始化时执行一次,以后每一次切换路由之前调用一次。
如果路由组件较多。to.path会比较繁琐,可以考虑给需要鉴权的路由扩展一个布尔值属性,可以通过路由元来定义属性:meta:{isAuth : true}
6.13.2 全局后置守卫
router/index.js文件中拿到router对象。
router.afterEach((to, from)=>{ // 翻译为:每次后(寓意:每一次切换路由后执行。)
// 没有 next
document.title = to.meta.title // 通常使用后置守卫完成路由切换时title的切换。
})
这种路由守卫称为全局后置路由守卫。
初始化时执行一次,以后每一次切换路由之后调用一次。
该功能也可以使用前置守卫实现:
该功能使用后置守卫实现更好:
解决闪烁问题:
6.13.3 局部路由守卫之path守卫
注意:没有afterEnter
6.13.4 局部路由守卫之component守卫
注意:只有路由组件才有这两个钩子。
6.13.5 前端项目上线
- 路径中#后面的路径称为hash。这个hash不会作为路径的一部分发送给服务器:
- http://localhost:8080/vue/bugs/#/a/b/c/d/e (真实请求的路径是:http://localhost:8080/vue/bugs)
- 路由的两种路径模式:
- hash模式
- history模式
- 默认是hash模式,如何开启history模式
- router/index.js文件中,在创建路由器对象router时添加一个mode配置项:
- 项目打包
- 将Xxx.vue全部编译打包为HTML CSS JS文件。
- npm run build
- 这里服务器端选择使用Java服务器:Tomcat,接下来教大家配置Tomcat服务器:
- 下载JDK
- 安装JDK
- 配置环境变量:JAVA_HOME
- 注意:如果你安装的路径和我安装的不一样,只要能够找到JDK bin目录的上一级目录即可。
- 注意:如果你安装的路径和我安装的不一样,只要能够找到JDK bin目录的上一级目录即可。
- 下载Tomcat
- 安装Tomcat
- 解压就是安装。我这里直接解压到C盘的根目录下
- 解压就是安装。我这里直接解压到C盘的根目录下
- 配置环境变量:CATALINA_HOME
- 配置环境变量:PATH
- 启动Tomcat
- 打开dos命令窗口,输入startup.bat,看到以下窗口表示tomcat启动成功(注意Tomcat服务器的端口号是8080,启动Tomcat服务时最好先关闭vue脚手架,因为vue cli使用的端口也是8080,如果启动了Tomcat服务器,再启动vue脚手架的话,脚手架会另外开启一个其他的端口。)
- 如果你启动tomcat控制台有乱码也无所谓,如果实在看不下去,可以修改以下配置文件内容:
- 如果你启动tomcat控制台有乱码也无所谓,如果实在看不下去,可以修改以下配置文件内容:
- 打开dos命令窗口,输入startup.bat,看到以下窗口表示tomcat启动成功(注意Tomcat服务器的端口号是8080,启动Tomcat服务时最好先关闭vue脚手架,因为vue cli使用的端口也是8080,如果启动了Tomcat服务器,再启动vue脚手架的话,脚手架会另外开启一个其他的端口。)
- 关闭Tomcat
- ctrl + c 或者:dos命令窗口中输入:shutdown.bat
- 将前端项目部署到Tomcat。
- 找到tomcat服务器的webapps目录,并找到webapps目录下的ROOT目录,清空ROOT目录
- 将前端项目直接拷贝放到ROOT目录下即可。
- 访问项目。
- 重启tomcat,并访问。
- http://localhost:8080
- 下载JDK
- hash模式和history模式的区别与选择
- hash模式
- 路径中带有#,不美观。
- 兼容性好,低版本浏览器也能用。
- 项目上线刷新地址不会出现404。
- 第三方app校验严格,可能会导致地址失效。
- history模式
- 路径中没有#,美观。
- 兼容性稍微差一些。
- 项目上线后,刷新地址的话会出现404问题。需要后端人员配合可以解决该问题。
- hash模式
- 对于tomcat服务器来说,如何解决history带来的404问题,这需要后端人员写一段代码:
- 在ROOT目录下新建WEB-INF目录。
- 在WEB-INF目录下新建web.xml文件。
- 在web.xml文件中做如下配置:
<web-app xmlns=“https://jakarta.ee/xml/ns/jakartaee”
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd”
version=“6.0”
metadata-complete=“true”>
404 /index.html