动力节点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 使用路由

  1. 实现功能描述


  1. 根据静态页面提取两个组件:Tea.vue和Fruit.vue



  1. vue-router也是一个插件,安装vue-router
    1. vue2要安装vue-router3
      1. npm i vue-router@3
    2. vu3要安装vue-router4
      1. npm i vue-router@4
  2. main.js中引入并使用vue-router
    1. 导入:import VueRouter from ‘vue-router’
    2. 使用:Vue.use(VueRouter)
    3. new Vue时添加新的配置项:一旦使用了vue-router插件,在new Vue的时候可以添加一个全新的配置项:router

  1. router路由器的创建一般放在一个独立的js文件中,例如:router/index.js
    1. 创建router目录
    2. 创建index.js,在index.js中创建路由器对象,并且将其暴露。然后在main.js文件中引入该路由器即可。

  1. 使用router-link标签代替a标签(App.vue中)


router-link标签最终编译之后的还是a标签。vue-router库帮助我们完成的。

  1. 添加激活样式

使用active-class属性,在激活时添加样式:selected

  1. 指定组件的最终显示位置。

  1. 测试




注意事项:

  1. 路由组件一般会和普通组件分开存放,路由组件放到pages目录,普通组件放到components目录下。
  2. 路由组件在进行切换的时候,切掉的组件会被销毁。
  3. 路由组件实例比普通组件实例多两个属性:route和route和 routerouter
    1. $route:属于自己的路由对象。
    2. $router:多组件共享的路由器对象。

6.4 多级路由

  1. 要实现的效果


  1. 主要实现



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属性

  1. 栈数据结构:先进后出,后进先出原则。

  1. 浏览器的历史记录是存储在栈这种数据结构当中的。包括两种模式:
    1. push模式(默认的)
    2. replace模式

  1. 如何开启replace模式:

6.10 编程式路由导航

需求中可能不是通过点击超链接的方式切换路由,也就是说不使用如何实现路由切换。可以通过相关API来完成:

  1. push模式:
    1. this.$router.push({

name : ‘’,
query : {}
})

  1. replace模式:
    1. this.$router.replace({

name : ‘’,
query : {}
})

  1. 前进:
    1. this.$router.forward()
  2. 后退:
    1. this.$router.back()
  3. 前进或后退几步:
    1. this.$router.go(2) 前进两步
    2. this.$router.go(-2) 后退两步
  4. 使用编程式路由导航的时候,需要注意:重复执行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 前端项目上线

  1. 路径中#后面的路径称为hash。这个hash不会作为路径的一部分发送给服务器:
    1. http://localhost:8080/vue/bugs/#/a/b/c/d/e (真实请求的路径是:http://localhost:8080/vue/bugs)
  2. 路由的两种路径模式:
    1. hash模式
    2. history模式
  3. 默认是hash模式,如何开启history模式
    1. router/index.js文件中,在创建路由器对象router时添加一个mode配置项:

  1. 项目打包
    1. 将Xxx.vue全部编译打包为HTML CSS JS文件。
    2. npm run build


  1. 这里服务器端选择使用Java服务器:Tomcat,接下来教大家配置Tomcat服务器:
    1. 下载JDK
    2. 安装JDK
    3. 配置环境变量:JAVA_HOME
      1. 注意:如果你安装的路径和我安装的不一样,只要能够找到JDK bin目录的上一级目录即可。
    4. 下载Tomcat
    5. 安装Tomcat
      1. 解压就是安装。我这里直接解压到C盘的根目录下
    6. 配置环境变量:CATALINA_HOME
    7. 配置环境变量:PATH
    8. 启动Tomcat
      1. 打开dos命令窗口,输入startup.bat,看到以下窗口表示tomcat启动成功(注意Tomcat服务器的端口号是8080,启动Tomcat服务时最好先关闭vue脚手架,因为vue cli使用的端口也是8080,如果启动了Tomcat服务器,再启动vue脚手架的话,脚手架会另外开启一个其他的端口。)
        1. 如果你启动tomcat控制台有乱码也无所谓,如果实在看不下去,可以修改以下配置文件内容:
    9. 关闭Tomcat
      1. ctrl + c 或者:dos命令窗口中输入:shutdown.bat
    10. 将前端项目部署到Tomcat。
    11. 找到tomcat服务器的webapps目录,并找到webapps目录下的ROOT目录,清空ROOT目录
    12. 将前端项目直接拷贝放到ROOT目录下即可。
    13. 访问项目。
    14. 重启tomcat,并访问。
    15. http://localhost:8080
  2. hash模式和history模式的区别与选择
    1. hash模式
      1. 路径中带有#,不美观。
      2. 兼容性好,低版本浏览器也能用。
      3. 项目上线刷新地址不会出现404。
      4. 第三方app校验严格,可能会导致地址失效。
    2. history模式
      1. 路径中没有#,美观。
      2. 兼容性稍微差一些。
      3. 项目上线后,刷新地址的话会出现404问题。需要后端人员配合可以解决该问题。
  3. 对于tomcat服务器来说,如何解决history带来的404问题,这需要后端人员写一段代码:
    1. 在ROOT目录下新建WEB-INF目录。
    2. 在WEB-INF目录下新建web.xml文件。
    3. 在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