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

相关文章

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

Python将字符串转换为小写字母的几种常用方法

《Python将字符串转换为小写字母的几种常用方法》:本文主要介绍Python中将字符串大写字母转小写的四种方法:lower()方法简洁高效,手动ASCII转换灵活可控,str.translate... 目录一、使用内置方法 lower()(最简单)二、手动遍历 + ASCII 码转换三、使用 str.tr

Spring Boot 常用注解整理(最全收藏版)

《SpringBoot常用注解整理(最全收藏版)》本文系统整理了常用的Spring/SpringBoot注解,按照功能分类进行介绍,每个注解都会涵盖其含义、提供来源、应用场景以及代码示例,帮助开发... 目录Spring & Spring Boot 常用注解整理一、Spring Boot 核心注解二、Spr

Java中的内部类和常用类用法解读

《Java中的内部类和常用类用法解读》:本文主要介绍Java中的内部类和常用类用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录内部类和常用类内部类成员内部类静态内部类局部内部类匿名内部类常用类Object类包装类String类StringBuffer和Stri

MySQL连接池(Pool)常用方法详解

《MySQL连接池(Pool)常用方法详解》本文详细介绍了MySQL连接池的常用方法,包括创建连接池、核心方法连接对象的方法、连接池管理方法以及事务处理,同时,还提供了最佳实践和性能提示,帮助开发者构... 目录mysql 连接池 (Pool) 常用方法详解1. 创建连接池2. 核心方法2.1 pool.q