zoukankan      html  css  js  c++  java
  • vue的页面跳转方式和传值、取值

    1、通过router-link进行跳转,传递方式:

    • 使用query传递参数,路由必须使用path引入,

    • 使用params传递参数,路由必须使用name引入

    <router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}">
      <button>跳转</button>
    </router-link>       
    
    //跳转地址 ====> /home?key=hello&value=world
    
    //取值 ====> this.$route.query.key
    
    
    <router-link :to="{name: '/home', params: {key: 'hello', value: 'world'}}">
      <button>跳转</button>
    </router-link>  
    
    //跳转地址 ====> /home ??? (暂时没用过)
    
    //取值 ====> this.$route.params.key
    

    2、$router方式跳转:

    this.$router.path({
      path: '/detail',
      query: {
        name: 'admin',
        code: 10021
      }
    
    });
    
    //跳转地址 ====> /detail?name=admin&code=10021
    
    //取值 ====> this.$route.query.name
     
    
    this.$router.path({
      name: 'detail',
      params: {
        code: 10021
      }
    });
    
    //跳转地址 ====> /detail/10021
    
    //取值 ====> this.$route.params.code
    
  • 相关阅读:
    Notepad++
    pycharm
    pygame游戏开发-简介
    白月黑羽Python在线教程
    Selenium Web自动化 原理
    Web自动化
    Web自动化
    转:Android开发环境搭建
    Android系统架构说明介绍
    Enjoy Android
  • 原文地址:https://www.cnblogs.com/yx-liu/p/15137867.html
Copyright © 2011-2022 走看看