【Vue2.0】—vue-router(二十七)

简介: 【Vue2.0】—vue-router(二十七)

一、路由配置

作用:让路由组件更方便的收到参数

二、<router-link></ router-link> 的replace属性

  • 作用:控制路由跳转时操作浏览器操作历史记录的模式
  • 浏览器的历史记录有两种写入方式:分别是pushreplacepush是追加历史记录,replace是替换当前的记录,路由跳转的时候默认是push
  • 如何开启replace模式
<router-link replace………………></router-link>

三、编程式路由导航

作用:不借助实现路由跳转,让路由跳转更加灵活

四、缓存路由组件

作用:让不展示的路由组件保持挂载,不被销毁

代码如下:

五、两个新的生命周期的钩子

作用:路由组件所独有的两个生命周期的两个钩子,用于捕获路由组件的激活状态

六、路由守卫

作用:对路由进行权限的控制

分类:全局守卫、独享首位、组件内守卫

全局守卫

独享路由守卫

组件内守卫

七、路由的两种工作模式

  1. 对于一个url来说,什么是hash值?
    #及其后面的内容就是hash值
  2. hash值不会包含在HTTP请求中,即:hash值不会带给服务器

hash模式

  • 地址中永远带着#号,不美观
  • 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法
  • 兼容性较好

history模式

  • 地址干净,美观
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持,解决页面服务器端刷新404的问题


相关文章
|
JavaScript 前端开发
Vue系列教程(17)- 路由(vue-router)
Vue系列教程(17)- 路由(vue-router)
94 1
|
11月前
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
415 0
|
6月前
|
JavaScript 前端开发 API
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
250 0
|
6月前
|
JSON JavaScript 前端开发
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向
225 0
|
11月前
|
存储 前端开发 JavaScript
【Vue2.0】—vue-router(二十六)
【Vue2.0】—vue-router(二十六)
|
JavaScript Go 网络架构
【vue入门手册】 九 、初识 vue-router
【vue入门手册】 九 、初识 vue-router
|
JavaScript 前端开发
Vue3引入vue-router路由并通过vue-wechat-title设置页面
对于用类似Vue前后端分离技术架构的单页应用页面之间的跳转没有非前后端分离那么来得直接,甚至连设置跳转页面的Title都要费一番周折,本文介绍Vue3引入vue-router路由并设置页面Title,通过vue-router实现页面的路由,通过vue-wechat-title来设置页面的title。
314 0
|
JavaScript API Go
Vue | Vue.js 全家桶 - Vue-Router详解(二)
Vue | Vue.js 全家桶 - Vue-Router详解(二)
|
移动开发 JavaScript 前端开发
Vue | Vue.js 全家桶 - Vue-Router详解(一)
Vue | Vue.js 全家桶 - Vue-Router详解(一)
|
JavaScript 网络架构
Vue 安装 Vue-router 路由安装以及使用
Vue 安装 Vue-router 路由安装以及使用
227 0