首页 > 其他分享 >VUE之重定向redirect

VUE之重定向redirect

时间:2024-06-12 20:31:14浏览次数:13  
标签:redirect 这个 重定向 vue 初始值 VUE 路由

VUE之路由和重定向redirect

这个小知识点是在学习做项目的时候遇到的一个问题,借鉴了一个他人的项目,是一个酒店管理系统,拿到源码之后导到我的vscode里。 参考链接
导的过程比较顺利,正常安装,加依赖,没有报错的情况,这个源码一共设计了4款登录界面,但是我在运行服务的时候,一直是进入一个相同的界面,不知道应该怎么转到其他的页面,在师父指导下学习了路由和重定向redirect。

路由

具体学术详解参照这个教程参考链接

大白话理解就是,设置你进入自己做的网站的网址的各种参数。
对应vue里边的router文件夹,里边的index.ts,就是设置路由的

重定向redirect

直接上图

在这里插入图片描述
结合这个图来讲,我们设置好前端这个登录界面之后,运行服务之后可以进我们设计好的这个登录界面,但是这个路由的path初始值是’/‘,只能运行我图中重定向下边那行被我注释掉的绿色代码,所以只能进对应的/loginWork.vue这个组件,想进别的就得重新定向,把这个path初始值变成其他组件的对应初始值,例如redirect:’/longin’,这个时候Path初始值就变成’/longin’这个了,然后他就进loginSwitch.vue这个组件里边了,这样就实现进其他的网址了。

标签:redirect,这个,重定向,vue,初始值,VUE,路由
From: https://blog.csdn.net/weixin_40390585/article/details/139635531

相关文章

  • uniapp vue3 实现自定义Switch效果
    <template><viewclass="container"@click="toggleSwitch"><label:class="isOn?'switch-checked':'switch-nochecked'"><viewclass="open">{{activ......
  • Vue3——ref和reactive的比较
    定义数据ref用来定义基础类型数据和对象类型数据reactive只能定义对象类型数据使用方式ref定义的响应式变量必须使用.valuereactive定义的响应式变量不能使用.value,直接使用响应式对象,但是重新分配一个新对象,会失去响应式,解决方式使用Object.assign(oldObject,newObjec......
  • 【Cesium】Vue+js+Cesium实现海康监控视频云台控制
    1.硬件设备与视频流接入    如需要一步上一篇博客【Cesium】Vue+js+Cesium实现监控视频流接入-CSDN博客文章浏览阅读308次,点赞12次,收藏17次。Vue2+js+Cesium实现监控视频流接入与相机云台控制https://blog.csdn.net/weixin_51540717/article/details/139614406?csdn_......
  • vue 弹框共用
    1.以本人项目为例修改新增使用同一个模态框<el-buttontype="warning"@click="AddCategory">新增一级分类目录</el-button><Dialogref="myDialog"@updateViews="updateViews":input="input":cid="cid"></Dia......
  • vue-json-excel 导出功能
    导出功能1.在vue中使用以下命令安装excel插件npminstallvue-json-excel-S2.在main.js文件中配置全局组件importJsonExcelfrom'vue-json-excel'Vue.component('downloadExcel',JsonExcel)3.在需要导出的.vue页面使用 <download-excel></download-excel><downl......
  • Vue配置项之生命周期(组件生命周期)
    LifecycleHooks首先说明一下,本人是前端小学生级别的菜鸡,吐槽的话请口下留情,在评论区指出错误或者补充不足,我会很喜欢,互喷不会进步,相互指点才会。。。。谢谢大家啦目录LifecycleHooks目录创建阶段(CreationPhase)beforeCreate(创建前):created(创建后):挂载阶段(MountingPha......
  • Vue全局组件
    全局组件首先说明一下,本人是前端小学生级别的菜鸡,吐槽的话请口下留情,在评论区指出错误或者补充不足,我会很喜欢,互喷不会进步,相互指点才会。。。。谢谢大家啦目录全局组件目录内置模板引入模板优点场景缺点......
  • Vue3——ref定义响应式数据
    ref作用ref:定义响应式变量,既可定义基础类型数据,也可以定义对象类型。语法格式:lettemp=ref(初始值)返回值:temp是一个RefImpl的实例对象,简称ref对象,ref对象的value属性是响应式。注意点:JS/TS中使用变量temp操作数据时,需要temp.value,但是在模板中不需要temp.value,直接......
  • vue3 dom ref 实现,子组件ref实现,defineExpose暴露子组件作用域
    示例代码App.vue<template><header><imgalt="Vuelogo"class="logo"src="@/assets/logo.svg"width="125"height="125"/><divclass="wrapper"><HelloWorld......
  • 在Vue3中高级前端是这样给按钮添加loading效果的
    前言一个页面有多个按钮,每个按钮都要添加loading效果,高级前端是如何在Vue3控制按钮是否显示loading效果的呢?普通前端我们先来看看初级普通前端平常是怎么给按钮添加loading效果的:<scriptsetup>import{ref}from'vue'constasyncFn=()=>newPromise(resolve=>......