5、vue-router之什么是编程式路由

简介: 前言:编程式路由在我们的项目使用过程中最常用的的方法了。GitHub:https://github.com/Ewall1106/mall什么是编程式路由呢?就是通过写js代码来实现页面的跳转1.router.push({path: 'name'});首先我们来讲讲简单的,上面两个方法记住,等效的。

前言:编程式路由在我们的项目使用过程中最常用的的方法了。
GitHub:https://github.com/Ewall1106/mall

什么是编程式路由呢?就是通过写js代码来实现页面的跳转

1.router.push('name'); 或者router.push({path: 'name'});

首先我们来讲讲简单的,上面两个方法记住,等效的。
① 还是在test.vue组件里面写个div并给它添加一个click跳转事件:

div上添加一个click点击事件

② 在view文件下新建一个goods.vue

goods.vue

③ 在router中引入这个goods组件

路由

④ 打开路径为test的页面并点击

localhost

⑤ ok,点一下我们就到goods页面了,实现了跟router-view标签一样的效果

goods页面

Ok,到这里我们已经实现了编程式路由的跳转了,接下来我们来试试路由携带参数跳转并接受参数。

2.router.push({path: 'name?a=123'}) 或者router.push({path: 'name',query:{a:123}})这两种方式都可以

话不多说,看图你应该能看懂:

路由跳转并携带参数

② 在goods.vue中输入

提醒一句,这里的获取上一级页面传过来的参数是$route.query.goodsId,是$route不是$router

goods.vue

③ ok,我们就可以看到页面中显示上级页面传过来的参数了:

localhost
goods.vue

3.$router.go();

这个就随意提一下,就是类似于history.go()的方法,括号里面填个1就是前进一级页面,-1就后退一级页面。差不多就是这样。

参考学习
https://router.vuejs.org/zh-cn/
https://developer.mozilla.org/zh-CN/docs/Web/API/History
https://www.jianshu.com/p/3036137769da
https://www.jianshu.com/p/f499d9f64958

目录
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
37 3
|
2月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
2月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
716 0
|
2月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
194 1
|
3月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript 前端开发 UED
|
2月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
2月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
63 0
|
2月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
39 2