Vue与React编程式路由导航

简介: Vue与React编程式路由导航

一、Vue

1、作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活
2、具体编码:

 //$router的两个API
  this.$router.push({
       name:'xiangqing',
     params:{
      name:xxx,
      age:xxx
     }
  })
  this.$router.replace({
       name:'xiangqing',
     params:{
      name:xxx,
      age:xxx
     }
  })
  this.$router.forward() //前进
  this.$router.back() //后退
  this.$router.go() //可前进也可后退

二、React

1、作用:不借助<Link> 实现路由跳转,让路由跳转更加灵活
2、具体编码:

replaceShow = (name,age)=>{
    //replace跳转+携带params参数
    this.props.history.replace(`/home/message/detail/${name}/${age}`)

    //replace跳转+携带search参数
    this.props.history.replace(`/home/message/detail?id=${name}&title=${age}`)

    //replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`,{name,age})
}

pushShow = (id,title)=>{
    //push跳转+携带params参数
    this.props.history.push(`/home/message/detail/${name}/${age}`)

    //push跳转+携带search参数
    this.props.history.push(`/home/message/detail?name=${name}&age=${age}`)

    //push跳转+携带state参数
    this.props.history.push(`/home/message/detail`,{name,age})
}

back = ()=>{
    this.props.history.goBack()
}

forward = ()=>{
    this.props.history.goForward()
}

go = ()=>{
    this.props.history.go(-2)
}
相关文章
|
24天前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
46 3
|
22天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
25天前
|
缓存 JavaScript
vue的多路由项目开发,您还在手动拼接路由名?
【8月更文挑战第20天】vue的多路由项目开发,您还在手动拼接路由名?
43 1
vue的多路由项目开发,您还在手动拼接路由名?
|
1月前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
1月前
|
缓存 JavaScript 数据安全/隐私保护
Vue学习之--------路由守卫(2022/9/6)
这篇文章详细介绍了Vue路由守卫的概念和应用,包括全局守卫、独享守卫和组件内守卫的实现方法,并通过实际代码示例和测试效果展示了如何对路由进行权限控制,以及Vue路由器的两种工作模式:hash模式和history模式。
Vue学习之--------路由守卫(2022/9/6)
|
1月前
|
存储 JavaScript 前端开发
Vue学习之--------路由(Router)的基本使用(1)(2022/9/5)
这篇文章是关于Vue-router路由的基本使用教程,涵盖了安装配置、应用插件、编写路由规则、实现页面跳转和高亮显示,以及一些使用中的注意点和项目实际应用案例。
Vue学习之--------路由(Router)的基本使用(1)(2022/9/5)
|
1月前
|
缓存 JavaScript
Vue学习之--------多级路由的使用(2)(2022/9/5)
这篇文章介绍了在Vue中实现多级路由缓存的方法,包括在路由配置中添加meta属性以启用缓存,使用keep-alive组件包裹需要缓存的视图,以及在Vuex中管理缓存视图列表的逻辑。
Vue学习之--------多级路由的使用(2)(2022/9/5)
|
29天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
vue 批量自动引入并注册组件或路由等等
|
20天前
|
前端开发 测试技术 开发者
React Router的神奇之处:如何用导航与路由管理让你的复杂SPA飞起来?
【8月更文挑战第31天】本文全面解析了React Router——一款用于React应用的路由与导航管理库。通过定义不同路径并依据URL渲染组件,React Router支持路径匹配、参数路由及嵌套路由等多种模式。文章详细介绍了其基本与高级用法,如使用`Link`组件导航、`Switch`组件进行路径匹配及`NavLink`自定义活动链接样式。此外,还探讨了懒加载、代码分割等性能优化技巧,并提供了简单示例代码,帮助读者快速上手。遵循本文最佳实践,开发者能够更高效地利用React Router构建复杂的单页面应用。
31 0
|
21天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
11 0

热门文章

最新文章