vueRouter常用属性

news/2024/4/17 17:24:18

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 // 不需要缓存}},
]

https://www.xjx100.cn/news/3118868.html

相关文章

通过Python Flask快速构建应用程序

通过Python Flask快速构建应用程序 当你想要快速创建一个简单且轻量级的 Web 应用程序时&#xff0c;Python 的 Flask 框架是一个非常好的选择。Flask 提供了许多有用的功能和扩展&#xff0c;可以帮助你快速搭建一个可靠的 Web 应用程序。本文将向你介绍如何快速入门并开始使…

OpenCvSharpSlim画中文

github地址&#xff1a;https://github.com/AvenSun/OpenCvSharpSlim Slim Build of OpenCvSharp OpenCvSharpSlim This project provides the slim build of OpenCvSharp native library . Currently therere binary packages for OpenCvSharp 2.4.10, 3.4.20 ,4.8.0 and 4…

【物联网与大数据应用】Hadoop数据处理

Hadoop是目前最成熟的大数据处理技术。Hadoop利用分而治之的思想为大数据提供了一整套解决方案&#xff0c;如分布式文件系统HDFS、分布式计算框架MapReduce、NoSQL数据库HBase、数据仓库工具Hive等。 Hadoop的两个核心解决了数据存储问题&#xff08;HDFS分布式文件系统&#…

【Pytorch】Visualization of Feature Maps(4)——Saliency Maps

学习参考来自 Saliency Maps的原理与简单实现(使用Pytorch实现)https://github.com/wmn7/ML_Practice/tree/master/2019_07_08/Saliency%20Maps Saliency Maps 原理 《Deep Inside Convolutional Networks: Visualising Image Classification Models and Saliency Maps》&…

初识Java 18-5 泛型

目录 动态类型安全 异常 混型 C中的混型 替代方案 与接口混合 使用装饰器模式 与动态代理混合 本笔记参考自&#xff1a; 《On Java 中文版》 动态类型安全 在Java 5引入泛型前&#xff0c;老版本的Java程序中就已经存在了List等原生集合类型。这意味着&#xff0c;我们…

网络数据通信—ProtoBuf实现序列化和反序列化

目录 前言 1.环境搭建 2. centos下编写的注意事项 3.约定双端交互接口 4.约定双端交互req/resp 5. 客户端代码实现 6.服务端代码实现 前言 Protobuf还常用于通讯协议、服务端数据交换场景。那么在这个示例中&#xff0c;我们将实现一个网络版本的通讯录&#xff0c;模拟…

JoySSL证书从申请到安装

为了保护网站和用户数据的安全&#xff0c;使用SSL证书是至关重要的一步。JoySSL是一种可靠的SSL证书提供商&#xff0c;它提供了简单易用的证书申请和安装流程。本文将详细介绍如何从申请到安装JoySSL证书的步骤。 一、申请JoySSL证书 1&#xff0c;访问JoySSL官方网站&#…

C++设计模式——Bridge模式(上)

一、什么是桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它将抽象部分和实现部分解耦&#xff0c;使得它们可以独立地变化。该模式使用了组合关系来替代继承&#xff0c;从而达到降低系统复杂度的目的。C作为一门面向对象的编程语…