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
  • 相关阅读:
    Altium_Designer-原理图库如何添加低电平有效的管脚?
    Altium_Designer-怎么将“原理图的更改”更新到“pcb图”?
    Altium_Designer-各种布线总结
    Altium_Designer-PCB中各层作用详解
    AD的命名规则 AD常用产品型号命名规则
    Altium_Designer如何快速寻找元件和封装
    Makedown语法说明
    使用Atom编写Makedown
    Vim基本命令
    Python-Django框架学习笔记——第二课:Django的搭建
  • 原文地址:https://www.cnblogs.com/yangchin9/p/11005187.html
Copyright © 2011-2022 走看看