首页 > 编程语言 >vue 路由中编程式导航

vue 路由中编程式导航

时间:2022-11-29 12:16:06浏览次数:47  
标签:vue 编程 跳转 router 导航 路由

在 vue 中,实现路由跳转有两种方式

1. 声明式导航:router-link(一般情况都使用这个)

2. 编程式导航:this.$router.push    和    this.$router.replace

 

  1.  在什么情况下要使用编程式导航?

              比如在登录页面,点击登录按钮的时候要跳转到系统主页面,这时我们就会用到编程式导航

         2.  this.$router.push(path)

              是跳转到指定路由,还可以前进和后退,this.$router.go(正数/负数)——正数代表前进几步,负数代表后退几步

         3.  this.$router.replace(path)

              是替换当前路由跳转到指定路由,不会向 history 添加新纪录,不能前进和后退

标签:vue,编程,跳转,router,导航,路由
From: https://www.cnblogs.com/lanmangou/p/16935041.html

相关文章

  • 学习编程入门最适合的五大网站
    众所周知,浅显易懂的教程对于一个初学者的重要性。一、在线教程首先列出一些在线教程网站,这些在线教程网站通常都比较适合入门,可以作为开发学习路上的第一个阶梯,也可以作......
  • Vue 前端解析 Excel 数据
    想要在前端实现Excel表格数据的解析,需要安装xlsx包:npminstallxlsx然后在需要使用的地方引入:import*asXLSXfrom'xlsx/xlsx.mjs'使用ElementUI提供......
  • vuecli3配置文件路径别名
    vue.config.js文件中module.exports={configureWebpack:{resolve:{alias:{'assets':'@/assets','common':'@/common',......
  • vue3-vite下tailwindcss安装与配置
    初始化TailwindCSS安装Tailwind以及其它依赖项:npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest一、创建您的配置文件接下来,生成您的 t......
  • vue3-vite下配置postcss-pxtorem进行移动端适配
    如果使用Vue进行移动端页面的开发,需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。amfe-flexableamfe-flex......
  • VUE中循环绑定ref
    <template><divclass="flex"><el-buttonv-for='(item,index)inlist':type=item.type@click=click(item):ref="'ref'">{{item.value}}</el-......
  • vue3响应式原理以及ref和reactive区别还有vue2/3生命周期的对比,第二天
    前言:前天我们学了ref和reactive,提到了响应式数据和Proxy,那我们今天就来了解一下,vue3的响应式在了解之前,先复习一下之前vue2的响应式原理vue2的响应式:原理:对......
  • vue ts md5加密
    安装一下ts-md5npminstallts-md5引入import{Md5}from'ts-md5'使用letresult=Md5.hashStr('加密文本')去看看教程......
  • vue中光标自动显示到指定的input框内
    1、给input加上ref;1<v-otp-input2ref="inputName"3class="opt-input"4length="9"5type="number"6pattern="\d*"7v-model="payNum"8......
  • 【Vue】vite + ts 配置别名
    1.vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'function_resolve(dir:string){returnreso......