Vue3使用vue-router如何实现路由跳转与参数获取

目录
  • vue-router实现路由跳转与参数获取
    • 路由跳转和传参
  • 路由跳转三种方法的总结
    • 一、第一种
    • 二、第二种
    • 三、第三种

vue-router实现路由跳转与参数获取

路由跳转和传参

import { defineComponent, onMounted, reactive, readonly, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter(), route = useRoute();
    const submitForm = () => {
      formRef.value?.validate((valid) => {
        if (valid) {
          login({ strategy: 'local', ...ruleForm })
            .then((res: any) => {
            // 获取参数和路由跳转
              const redirect: string = route.query && route.query.redirect;
              if (redirect) {
                router.replace(redirect);
              } else {
                router.push('/home');
              }
              return true;
            })
            .catch((e) => {
              ...
            });
        } else {
         ...
          return false;
        }
      });
    };
    return { ..., submitForm };
  }
});

路由跳转三种方法的总结

一、第一种

1、路由设置方式

{`在这里插入代码片`
  path: '/detail/:id',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

2、路由跳转模式

this.$router.push(
  {
    path: `/detail/1`
  }
)

3、获取参数方式

let detailId = this.$route.params.id

注意: params 传参相当于是路由的一部分是必须传的东西,经过验证不传页面会跳转到空白页

该方式刷新页面id 不丢失

二、第二种

1、路由设置方式

{
  path: '/detail/:id',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

2、路由跳转模式

this.$router.push(
  {
    name: 'Detail',
    params: {
      id
    }
  }
)

3、获取参数方式

let detailId = this.$route.params.id

注意:此方式传参 路由设置方式中的 id 可以传也可以不传,不传刷新页面id 会丢失

该方式刷新页面id 不丢失

三、第三种

1、路由设置方式

{
  path: '/detail',
  name: 'detail',
  meta: { keepAlive: true },
  component: () => import('../pages/detail/index')
}

2、路由跳转模式

this.$router.push(
  {
    path: 'Detail',
    query: {
      id
    }
  }
)

3、获取参数方式

let detailId = this.$route.query.id

注意:此方式传参 路由设置方式中的 id 不能写,因为写了就是router 的一部分,这样就会匹配不到, 此方式刷新页面id 不丢失

http://localhost:8080/#/detail?id=1

总结: params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2022-03-30

vue-router实现组件间的跳转(参数传递)

通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &

详解vue 路由跳转四种方式 (带参数)

1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

Vue this.$router.push(参数)实现页面跳转操作

很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

Vue中this.$router.push参数获取方法

传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

在vue项目中利用popstate处理页面返回的操作介绍

需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件.(这包括了后退/

PHP页面跳转操作实例分析(header方法)

本文实例分析了PHP页面跳转操作.分享给大家供大家参考,具体如下: 跳转 header()为php函数,向浏览器发送指定命令 html: <meta http-equiv="Refresh" content="3;url=other.php"/> 立即跳转: header('Location:other.php'); //file_put_contents('bee.txt','execute'); die; 执行header时候,并不是立即结束,而是会

微信小程序常见页面跳转操作简单示例

本文实例讲述了微信小程序常见页面跳转操作.分享给大家供大家参考,具体如下: 1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ url: '页面路径', }) 实例: pageSkip :function(){ wx.navigateTo({ url: '/page/admin/details', }) }, 2.关闭当前页面,返回到上一级或多级页面:wx.navigateBack({ url: '页面路径', }) 实例: pageSkip :function(){ wx

vue-router3.0版本中 router.push 不能刷新页面的问题

在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转,找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方. 出现的情况是 router.push 后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 我看了一下 package.json,我的 vue 和 axios 是没有写版本号,但 vue-router 明明写了版本号,怎么可能

Vue页面跳转动画效果的实现方法

前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现

Vue项目页面跳转时浏览器窗口上方显示进度条功能

在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

Vue.js实现一个SPA登录页面的过程【推荐】

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

Django实现文章详情页面跳转代码实例

1.由于不支持博客首页到文章详情页的跳转,只能打开第一篇文章的详情页 2.所以需要做以下工作: 设计文章详情页的url,完善视图函数逻辑,实现首页跳转 /blog/detail =>不能指定某一篇文章 /blog/detail/1 => 博客唯一id唯1的文章 /blog/detail/2 => 博客唯一id唯2的文章 /blog/detail/3 => 博客唯一id唯3的文章 /blog/detail/...... 获取URL路径参数:<> 页面跳转:href指定ht