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
  • 相关阅读:
    闪电侠 Netty 小册里的骚操作
    面试被问烂的 Spring IOC(求求你别再问了)
    面试问烂的 Spring AOP 原理、SpringMVC 过程(求求你别问了)
    使用 Cglib 实现多重代理
    Redis 初次见面
    Apollo 10 — adminService 全量发布
    Apollo 9 — adminService 主/灰度版本发布
    简析限流算法
    Dubbo 源码分析
    Dubbo 源码分析
  • 原文地址:https://www.cnblogs.com/yangchin9/p/11005187.html
Copyright © 2011-2022 走看看