uniapp的navigator页面跳转遇到的问题

news2024/9/26 5:16:56

文章目录

  • 先看路由
  • index组件
  • login组件
  • 最后再从index转到login(问题)

先看路由

主页默认加载的index

	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],

index组件

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>

		<navigator url="/pages/login/login">
			Login
		</navigator>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.checkLogin();
		},
		onShow() {
			this.checkLogin();
		},
		methods: {
			checkLogin() {
				if (!this.$store.state.isLogin) {
					uni.navigateTo({
						url: "../login/login"
					})
				}
			}
		},
	}
</script>


首先加载index
但是这边在用户未登录时会跳转到login
用的以下路径

可使用

	url: "../login/login"

不可使用

	url: "pages/login/login"

在这里插入图片描述

login组件

在用户登录后可以进行正常的首页跳转
注意url

可使用

url="../index/index"

不可使用

url="pages/index/index"
<template>
	<view class="login">
		<view>
			登录状态: {{isLogin}}
		</view>
		<button type="default" @click="login">登录</button>
		<button type="default" @click="logout">注销</button>
		
		<navigator url="../index/index">首页</navigator>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState(['name', 'isLogin'])
		},
		methods: {
			// 登录
			login() {
				this.$store.commit('setLogin', true);
			},
			// 登出 注销
			logout() {
				this.$store.commit('setLogin', false);
			},
		}
	}
</script>

最后再从index转到login(问题)

正确url

url="/pages/login/login"

不可使用,可能会导致所有navigator不可用,原因不明

url="../login/login"

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/696069.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于kubesphere的k8s环境部署三节点的rook-ceph集群

文章目录 前言链接&#xff1a;[基于kubesphere的k8s环境部署单点版本的rook-ceph](https://blog.csdn.net/baidu_35848778/article/details/131050918) 一、rook-ceph是什么&#xff1f;二、开始部署2.1 环境准备2.2 软件包准备&#xff0c;计算\存储节点执行2.3 下载rook-cep…

关于我想安装cuda11.8版本的torch

先开始去官网PyTorch 用这个官网的命令下&#xff0c;一直会把cpu版本的一起下下来&#xff0c;导致运行的时候一直cpu版本而不是gpu版本&#xff0c;torch.cuda.is_available()这个是false&#xff0c;问题很大。 重新去搜了个命令&#xff1a;pip install torch1.8.0cu111 t…

Vue+Element-ui实例_日历排班(自定义)

在日常开发需求中&#xff0c;可能会遇到给员工进行排班的需求&#xff0c;如果只是在table表格中显示&#xff0c;会显得枯燥、不直观&#xff0c;今天我们就来写一个可以自定义的日历排班功能&#xff0c;用的是vue2element-ui。 效果图如下&#xff1a; (图一)&#xff1a;…

输出流(写)学习

选择子类&#xff1a;FileOutputStream 文件输出字节流 看到的是d 说明会查询ASCII表 写入记事本时&#xff0c;一个字母是一个字节 public static void main(String[] args) throws Exception {FileOutputStream fos new FileOutputStream("e:\\asd.txt");byte[]…

☆Image captioning☆论文show,attend and tell的程序中create_input_files.py代码详解

手把手实现Image captioning,论文show,attend and tell的程序中create_input_files.py代码详解。如果感觉有用,不妨给博主来个一键三连,白天科研,晚上肝文,实属不易~ ~ ](https://imgse.com/i/p9FmMDK) 1. 代码解析(1) assert dataset in {coco, flickr8k, flickr30k…

【计算机网络】数据链路层--MAC媒体接入控制

1.概念 2.静态划分信道 2.1 频分复用 2.2 时分复用 2.3 波分复用 2.2 码分复用 2.3 习题1 2.4 应用举例 2.5 习题2 2.6 习题3 3.小结

服务器设置tomcat开机自启动(cmd命令行语句,tomcat注册到服务里)

1、找到tomcat安装目录&#xff0c;进入bin/文件夹下面&#xff0c;在此打开windows 命令行窗口。 2、输入 service install tomcatXXX 将tomcat注册成为windows服务&#xff0c;其中tomcatXXX为服务名。 3、查看刚刚注册的服务 “我的电脑”-》右键管理 发现刚刚的服务是手…

Stable Diffusion 无损放大图像和缩小图像

Stable Diffusion默认生成的图片尺寸为512512&#xff0c;这种尺寸的分辨率可能无法满足高质量的要求。若想生成大图&#xff0c;存在两种可选的方法&#xff0c;在显卡足够支撑的情况下可以将图像当打到8K。 文章目录 hires.fix高分辨率修复extras附加功能放大功能缩放功能 hi…

VirtualBox 开启硬件虚拟化

最近用VirtualBox开了一台centos7的虚拟机&#xff0c;想用虚拟机搭建一个KVM环境&#xff0c; 结果发现Virtualbox开启虚拟化的选项是灰色的&#xff0c;无法选择&#xff0c; 解决方法&#xff1a;进入virtualbox安装目录&#xff0c;打开cmd&#xff0c;进入命令行模式打开嵌…

使用NVM下载和安装NodeJS教程

NodeJS下载与安装教程 一、下载 NVM二、安装 NVM三、安装 Node四、配置 NVM 和 NodeJS4.1 配置环境变量4.2 配置node_global和node_cache 这里我是用的 NVM 下载&#xff0c;后期管理 Node 版本很方便&#xff0c;推荐这种方式&#xff0c;还有一种方式是直接下载 NodeJS 进行安…

PPT如何跨页让图像对齐?

例如&#xff1a; 第1页和第2页的图片&#xff0c;希望2张图片在ppt中是固定的位置。 选择视图菜单栏&#xff0c;勾选参考线。 页面空白处&#xff0c;鼠标右键点击&#xff0c;显示菜单栏&#xff0c;选择添加水平或垂直参考线。 拖动参考线到想要的位置&#xff0c…

elementUI表格勾选框判断选择相同的内容才能进行后续逻辑处理;否则拦截提示

需求是&#xff1a; 可多选需满足条件&#xff1a;同一个年级、同一个分数&#xff1b; 不满足条件给出提示&#xff1a;请选择同一个年级 、分数的学生 1、先对勾选数据进行赋值 /** 表格复选框勾选 */handleSelectionChange(val) {console.log(val)this.tableSelectArr va…

5.7.1 UDP概述

5.7.1 UDP概述 用户数据报UDP协议是在IP数据报服务之上增加了两个内容 端口的复用和分用差错控制 一、UDP特点 UDP特点TCP特点无连接面向连接不可靠的服务可靠的服务点到点和多点通信点到点的通信首部8字节首部固定部分20字节面向报文面向字节流 UDP是无连接的服务&#x…

想做一个简单功能小程序需要多久

对于小程序开发的新手来说&#xff0c;往往会有这样一个问题&#xff1a;想做一个简单功能的小程序&#xff0c;大概需要多久时间呢&#xff1f;实际上&#xff0c;这个问题的答案取决于许多因素&#xff0c;包括你的开发技能、你计划实现的功能以及你为项目投入的时间等。 首…

建筑企业缺成本票,怎么解决?学会这几招可胜券在握!

建筑企业缺成本票&#xff0c;怎么解决&#xff1f;学会这几招可胜券在握&#xff01; 《税筹顾问》专注于园区招商、企业税务筹划&#xff0c;合理合规助力企业节税&#xff01; 建筑行业业务流程的特点是一般建筑工期的周期长&#xff0c;涉及的施工人员构成十分复杂&#x…

Docker安装,常用命令,部署MySQL,Tomcat,nginx,redis

Docker简介 Docker是基于Go语言实现的云开源项目。 Docker的主要目标是“Build&#xff0c;Ship and Run Any App,Anywhere”&#xff0c;也就是通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;使用户的APP&#xff08;可以是一个WEB应用或数据库应用等等…

Cocos Creator Node 旋转角度实现的几种方法

rotation 需要四元数进行旋转&#xff0c;具体旋转方法本博主直接绕开了&#xff0c;因为没给案例不太了解,知道的欢迎评论 1.在Cocos Creator v3.6中&#xff0c;要使用setRotation方法将节点旋转90度&#xff0c;可以使用以下代码&#xff1a; // 获取节点 var node this.n…

Grafana嵌入iframe,websoket连接报错400或403(nginx代理)

1、custom.ini配置文件修改allowed_origins* 2、 nginx中增加配置&#xff0c;如下&#xff1a;

Effective Modern C++ 笔记

Effective Modern C 本文是Effective Modern C学习笔记&#xff0c;以细碎的知识点记录的形式来记录学习过程。 简介&#xff1a; 1、Effective Modern C目标&#xff1a;学习怎样高效地使用新机能 2、移动语义&#xff08;C11&#xff09;&#xff1a; 右值表明这个对象适合…

Unable to Locate package python2 | Linux Ubuntu系统下python2和cif2cell的安装

Linux Ubuntu系统下python2的安装 安装键入命令和报错如下&#xff1a; 背景&#xff1a;官方早年前已经宣布停止 Python 2 的更新和服务&#xff0c;所以对于ubuntu20版本之后的&#xff0c;都是自带安装了python3&#xff0c;但是我们在处理安装某些大型科学计算程序的时候…