zoukankan      html  css  js  c++  java
  • 19跳转的方式

    1,可以通过Router类对应的对象中的navigateUrl()

    2,也可以通过Router类对应的对象中的navigate方法实现跳转,参数是一个数组,第一个元          素是path,第二个参数是要传递的参数

      this.myRouter.navigate ( [ path, argument ] ) ;

         跳转:this.myRouter.navigate( [ '/check' ] );

      传参:this.myRouter.navigate( [ '/check', { id=10 } ] )

           通过navigate进行传参,相比navigateUrl少了一步,无需再给接收方配置路由地址

       

       

       

    navigate练习

    demo15/

    demo15/login.component.ts,dashboard.component.ts;

    在login,有一个button,有一个超链接,一个输入框,点击上述button或者超链接 跳转到 dashboard,dashboard接收并显示在 h1 的标签中

    ①先实现跳转到dashboard (button 和 超链接)

    ②监听用户输入,把用户输入的值打印出来

    ③用一个变量保存用户输入的值,然后跳转到dashboard的navigate中,作为参数传递到dashboard页面中

    ④在dashboard页面中将这个值渲染出来

     

     

     

      

      ⑤超链接跳转并且传参

        

    总结:

      传参有两种方案:

      方案一:需要配置接收方路由地址

        { path : "dashboard" } ---> { path : "dashboard: /uName=zhangsan"}

        ①navigateByUrl ( 'dashboard / zhangsan' )

        ②routerLink="dashboard/zhangsan"

      方案二:不需要配置

        ①navigate( " [ ' dashboard' , {uName : 'zhangsan'}  ]" )

        ②[ routerLink ] = " ['/dashboard',{ uName : 'zhangsan'}] "

  • 相关阅读:
    linux命令总结
    在阿里云centos7.6上部署vue.js2.6前端应用
    MongoDb语法
    Echarts 地图绘制
    在阿里云Centos7.6中部署nginx1.16+uwsgi2.0.18+Django2.0.4
    django--- 支付宝退款
    响应式网站设计(Responsive Web design)
    django -- 推荐商品算法
    django -- 美多订单分表
    小程序基本配置
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12218515.html
Copyright © 2011-2022 走看看