zoukankan      html  css  js  c++  java
  • Vue-路由跳转的几种方式和路由重定向

    一、标签路由 router-link 

    注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。

    1、不传参
    
        <router-link :to="{name:'Home'}"> 
        <router-link :to="{path:'/home'}">
    
    2、传参
    
      <router-link :to="{name:'Home', params: {id:1}}">
      <router-link :to="{path:'/home', params: {id:1}}"> 
      // params传参数
      // 路由配置 path: "/home/:id"
      // 不配置path ,第一次可请求,刷新页面id会消失
      // 配置path,刷新页面id会保留
      // html 取参 $route.params.id
      // script 取参 this.$route.params.id
    
      <router-link :to="{name:'Home', query: {id:1}}">
      // query传参数 (类似get,页面url后面会显示参数)   // 路由可不配置   // html 取参 $route.query.id   // script 取参 this.$route.query.id

    二、编程式路由 this.$router.push()

    1、不传参
      this.$router.push('/home')
      this.$router.push({name:'Home'})
      this.$router.push({path:'/home'})
    
    2、传参
      this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
      // params传参数
      // 路由配置 path: "/home/:id"
      // 不配置path ,第一次可请求,刷新页面id会消失
      // 配置path,刷新页面id会保留
      // html 取参 $route.params.id
      // script 取参 this.$route.params.id
    
      this.$router.push({name:'Home',query: {id:'1'}})
      this.$router.push({path:'/home',query: {id:'1'}})   // query传参数 (类似get,页面url后面会显示参数)   // 路由可不配置   // html 取参 $route.query.id   // script 取参 this.$route.query.id
  • 相关阅读:
    JVM内存模型
    生产者与消费者的Java实现
    kafka常用命令
    java中join用法
    elasticsearch关于索引切分的实现
    三十六进制加法
    leetCode之Median of Two Sorted Arrays
    腾讯云“动态加速”与“CDN”的区别——浅谈对“动态加速”的理解(可能有误)
    洗澡或游泳等导致的耳朵进水的解决方案
    windows服务器间文件同步搭建步骤搜集
  • 原文地址:https://www.cnblogs.com/yangchin9/p/11005187.html
Copyright © 2011-2022 走看看