zoukankan      html  css  js  c++  java
  • vue-router之编程式路由

    ❤记在前面

              能救你的人,只有你自己... ...

     

    【根据妹子的建议,这次先打开运行项目,这样比较能排除到底是自己写的出错了,还是因为cnpm等出错了,昨天突然提示cnpm不是内部命令之类的问题】

    OK,以上是没有问题的


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

    下面先来两个简单的:

    $router.push('name');   或者   $router.push({path:'name'});   这两个是等效的

    ①还是在test.vue组件里面写个div并给它添加一个click跳转事件:


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


     ③在router->index.js中引入这个goods组件


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


     

     ⑤点击之后,进入goods页面,实现了跟router-view标签一样的效果


    OK,以上到这里就实现了编程路由的跳转,接下来来试试路由携带参数跳转并接受参数

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


    ②在goods.vue中输入  (获取上一级页面传过来的参数是$route)


     

     ③看一下,在页面中显示上级页面传过来的参数:


     

    三 $router.go();

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

  • 相关阅读:
    12.27 cf div3 解题报告
    网络流24题 P2754 [CTSC1999]家园
    P3690 【模板】Link Cut Tree (动态树)
    P2147 [SDOI2008]洞穴勘测
    P3203 [HNOI2010]弹飞绵羊
    P4172 [WC2006]水管局长
    P3979 遥远的国度
    P3128 [USACO15DEC]最大流Max Flow
    P3178 [HAOI2015]树上操作
    [SDOI2014]旅行
  • 原文地址:https://www.cnblogs.com/crystral/p/9113030.html
Copyright © 2011-2022 走看看