vueRouter常用属性

2023-12-01 11:30
文章标签 属性 常用 vuerouter

本文主要是介绍vueRouter常用属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vueRouter常用属性

  • base
  • mode
    • hash
    • history
      • history模式下可能会遇到的问题及解决方案
  • routes
    • props配置(最佳方案)
  • scrollBehavior

base

基本的路由请求的路径

如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/”,所有的请求都会在url之后加上/app/

new VueRouter({base: '/app/',...});

mode

设置路由工作模式hash或history

hash

http:/8000/#/hello

  • Vue-router 默认使用 hash 模式,使用 hash 模式时 url 中始终有 # 号。
  • 不会刷新页面,也不会发起新的 HTTP 请求,只是实现客户端页面的定位
  • #后面的字符不会被发送到服务器端,# 可以修改浏览器的访问历史记录。
  • hash 模式是通过改变锚点(#)来更新页面 url,并不会触发页面重新加载。
  • 通过window.onhashchange() 监听到hash 的改变,从而处理路由。

history

http:/8000/hello

  • 使用 history 模式时URL中不带 # 号。
  • 利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面。
  • 刷新会请求服务器,如果服务器中没有相应的响应或者资源,则会刷新出来404页面

history模式下可能会遇到的问题及解决方案

  • 使用history模式通常本地调试没有什么问题,但是一旦发布到测试或生产环境,则会出现页面白屏或者刷新页面白屏的现象,这种问题的出现是因为前端和服务端没有做相应的配置
//前端设置
module.exports = {// publicPath默认值是'/',即你的应用是被部署在一个域名的根路径上// 设置为'./',可以避免打包后的静态页面空白// 当在非本地环境时,这里以项目test为例,即打包后的h5项目部署服务器的test目录下// 那么这里就要把publicPath设置为/test/,表示所有的静态资源都在/test/里// 打包部署后,会发现index.html引用的静态资源都添加了路径/test/publicPath: process.env.NODE_ENV == 'development' ? './' : '/test/',......
}///服务端设置
location /test{...try_files $uri $uri/ /test/index.html //location /test表示项目部署在了 /test目录下,这里要跟vue.config.js里的publicpath的值保持一致。之所以刷新页面白屏,其实是因为路由资源不存在
}

routes

属性设置匹配的路由地址path与路由组件component

new Router({...routes: [{path: '/',component: () => import('.iews/Index'),name: "home",children: [{ path: '/home', name: "home", meta: { title: '管理' }, component: () => import('.src/home/Index') },]},{path: string,//路由路径component: Component, // 当前路由匹配时显示的路由组件name: string, // 命名路由redirect: string | Location | Function, // 路由重定向props: boolean | Object | Function,  //路由传参alias: string | Array<string>, // 路由别名children: Array<RouteConfig>, // 嵌套路由beforeEnter: (to: Route, from: Route, next: Function) => void, //路由守卫caseSensitive: boolean, // 匹配规则是否大小写敏感?(默认值:false)}}]
})

props配置(最佳方案)

{ // 二级路由path: 'message',component: Message,children: [{ // 三级路由name: 'detail',path: 'details/:id/:title/:desc', // 配置占位符component: Details,props(route){ // router每次调的时候会把 $route 传进来,你想怎么取就怎么取!return {id: route.params.id,title: route.params.title,desc: route.params.desc}}// es6解构赋值写法更简单//props({query: {id, title, desc}}){//    return {id, title, desc}//}}]
}

scrollBehavior

置路由跳转时,页面滚动条的位置

很多情况下,用户希望查看详情页以后,返回列表页刚刚浏览的位置,但由于列表页组件已经被销毁,所以我们重新返回到列表页后页面会置顶,就需要重新下拉查看列表,这样就做了很多没有必要的操作。

new VueRouter({...scrollBehavior() {return { x: 0, y: 0 };},});

也可以使用如下两种方案(更推荐使用scrollBehavior方案)

  • 使用路由守卫),在beforRouterLeave的路由钩子记录当前页面滚动位置
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {this.scrollTop = document.documentElement.scrollTop || document.body.scrollTopnext()},//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {next(vm => {document.body.scrollTop = vm.scrollTop})},
  • 使用keep-alive缓存
//App.vue
<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
</template>//router.jsroutes: [{path: '/',name: 'List',component: () => import('./list.vue'),meta: {keepAlive: true // 需要缓存}},{path: '/content/:contentId',name: 'content',component: () => import('./content.vue'),meta: {keepAlive: false // 不需要缓存}},
]

这篇关于vueRouter常用属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/440986

相关文章

Python中pywin32 常用窗口操作的实现

《Python中pywin32常用窗口操作的实现》本文主要介绍了Python中pywin32常用窗口操作的实现,pywin32主要的作用是供Python开发者快速调用WindowsAPI的一个... 目录获取窗口句柄获取最前端窗口句柄获取指定坐标处的窗口根据窗口的完整标题匹配获取句柄根据窗口的类别匹配获取句

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Java String字符串的常用使用方法

《JavaString字符串的常用使用方法》String是JDK提供的一个类,是引用类型,并不是基本的数据类型,String用于字符串操作,在之前学习c语言的时候,对于一些字符串,会初始化字符数组表... 目录一、什么是String二、如何定义一个String1. 用双引号定义2. 通过构造函数定义三、St

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》:本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat