讲解vue-router之什么是编程式路由

前言：编程式路由在我们的项目使用过程中最常用的的方法了。

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
//www.jb51.net/article/141020.htm
//www.jb51.net/article/141022.htm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vue-router的那些事儿

    一.引子 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题 二.vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器, 这里的路由就是SPA(单页应用)的路径管理器 .再通俗的说,vue-router就是WebApp的链接路径管理系统. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.

  • 讲解vue-router之什么是动态路由

    讲解vue-router之什么是动态路由

    前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起. GitHub:https://github.com/Ewall1106/mall/tree/master 1.动态路由有一个什么适用场景呢? 比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态. 2.官方文档 首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/) 你可以在一个路由中设置多段"路径参数&qu

  • 讲解vue-router之什么是嵌套路由

    讲解vue-router之什么是嵌套路由

    上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由. GitHub:https://github.com/Ewall1106/mall 1.嵌套路由的使用场景是什么呢? 大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容:这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由. 2.具体是怎么实现的? ① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容 title1

  • Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解

    目录 一.声明式导航&编程式导航 二.导航守卫 三.axios拦截器 一.声明式导航&编程式导航 1. 声明式导航:以超链接方式实现的页面跳转,就是声明式导航 < a href=‘url’> 链接文本或图像 < /a > < router-link to=‘url’ > 链接文本或图像 < /router-link > 2. 编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航 location.href = ‘

  • 讲解vue-router之什么是编程式路由

    讲解vue-router之什么是编程式路由

    前言:编程式路由在我们的项目使用过程中最常用的的方法了. GitHub:https://github.com/Ewall1106/mall/ 什么是编程式路由呢?就是通过写js代码来实现页面的跳转 1.$router.push('name'); 或者 $router.push({path: 'name'}); 首先我们来讲讲简单的,上面两个方法记住,等效的. ① 还是在test.vue组件里面写个div并给它添加一个click跳转事件: div上添加一个click点击事件 ② 在view文件下新

  • Vue 编程式路由导航的实现示例

    Vue 编程式路由导航的实现示例

    目录 router- link的replace属性 编程式路由导航 缓存路由组件 两个新的生命钩子 router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录.路由跳转时候默认为push3.如何开启replace模式News 编程式路由导航 作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活具体编码: / /$rout

  • Vue router/Element重复点击导航路由报错问题及解决

    Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

  • vue-router命名路由和编程式路由传参讲解

    vue-router命名路由和编程式路由传参讲解

    有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 重点代码: 效果: 若有不足请多多指教!希望给您带来帮助! 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • Vue-router编程式导航的两种实现代码

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航 例如:普通网页中的 location.href 编程式导航基本用法 常用的编程式导航 API 如下: this.$router.push('hash地址') this.$router.g

  • 快速掌握Vue Router使用方法

    目录 一.编程式路由导航 二.缓存路由组件 三.两个新的声明周期钩子 四.路由守卫 五.路由器的两种工作模式 本篇博客会介绍Vue中的VueRouter的基本使用,编程式路由导航增加了我们进行路由跳转的灵活性,缓存路由组件保障了我们使用路由时的便捷性,生命周期钩子为我们切入切出路由时提供了初始化与善后的工作,路由守卫保障了我们路由组件的安全性,路由工作模式会使我们理解为啥Vue项目中的路由会有一个#,通过本篇博客会让大家快速掌握Vue中路由的基本使用. 一.编程式路由导航 作用:不借助<rout

  • 详解Vue router路由

    详解Vue router路由

    目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻烦,采用命名路由可以用name直接找到 6.路由的params参数 1)在配置路由的时候需要先声明接收params参数,即先占位 2) 7.路由的pro

  • Vue编程式跳转的实例代码详解

    编程式跳转的实现代码,如下所示: <template> <ul class = "prolist"> <!-- //产品 --> <!-- :to = "/detail/item.id" --> <!-- 声明式跳转 :to = "{ name: 'detail',params: { id: item.id } }" --> <!-- <router-link :to = &

  • Spring编程式和声明式事务实例讲解小结

    Spring编程式和声明式事务实例讲解小结

    Spring事务管理 Spring支持两种方式的事务管理: 编程式事务管理: 通过Transaction Template手动管理事务,实际应用中很少使用, 使用XML配置声明式事务: 推荐使用(代码侵入性最小),实际是通过AOP实现 实现声明式事务的四种方式: 基于 TransactionInterceptor 的声明式事务: Spring 声明式事务的基础,通常也不建议使用这种方式,但是与前面一样,了解这种方式对理解 Spring 声明式事务有很大作用. 基于 TransactionProx

随机推荐