美文网首页
编程式路由

编程式路由

作者: F的平方 | 来源:发表于2019-01-17 11:06 被阅读2次

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

1.

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',query:{a:123}})这两种方式都可以

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

路由跳转并携带参数

② 在goods.vue中输入

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

goods.vue

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

localhost

goods.vue

3.$router.go();

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

相关文章

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

  • vue-8

    路由 路由传参$route.params.id获取路由上的参数 在js里定义路由组件: 编程式路由

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • Vue编程式导航、命名路由、命名视图

    前言 正如标题所示,本节我们将对编程式路由、命名路由和命名视图进行初步探索。所谓编程式导航是与前面我们使用的标签式...

  • 第4章 编程式导航 路由监听 导航守卫(1)

    目标 编程式导航 路由监听 导航守卫 编程式导航 https://router.vuejs.org/zh/guid...

  • 编程式路由

    什么是编程式路由呢?就是通过写js代码来实现页面的跳转 1. router.push({path: 'name'}...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • vue路由

    配置 引入 html js 动态路由 嵌套路由 编程式导航 router.push(location) route...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • 26.vue-router的使用2

    9.编程式路由导航 作用:不借助实现路由跳转,让路由跳转更加灵活 具体编码://$rou...

网友评论

      本文标题:编程式路由

      本文链接:https://www.haomeiwen.com/subject/tbnbdqtx.html