zoukankan      html  css  js  c++  java
  • vue路由传参的几种基本方式

    1、动态路由(页面刷新数据不丢失)

    methods:{
      insurance(id) {
           //直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: `/particulars/${id}`,
            })
    }

    路由配置

    {
         path: '/particulars/:id',
         name: 'particulars',
         component: particulars
       }

    接收页面通过  this.$route.params.id 接收

    this.$route.params.id

    2、路由 name 匹配,通过params传参

    methods:{
      insurance(id) {
           this.$router.push({
              name: 'particulars',
              params: {
                id: id
              }
            })
      }

    路由配置

     {
         path: '/particulars',
         name: 'particulars',
         component: particulars
       }

    也是通过   this.$route.params.id 接收参数

    3、路由path路径匹配,然后通过query来传递参数,这种情况下 query传递的参数会显示在url后面?id=?

    methods:{
      insurance(id) {
            this.$router.push({
              path: '/particulars',
              query: {
                id: id
              }
            })
      }

    路由配置

    {
         path: '/particulars',
         name: 'particulars',
         component: particulars
       }

    通过 this.$route.query.id 接收参数

  • 相关阅读:
    Dictionary集合 字典
    装箱和拆箱
    List< >泛型集合
    Hashtable 键值对集合
    File 类 的基本操作
    简体转换繁体
    ArrayList集合长度的问题
    ArrayList  集合
    里式转换
    字符串中常用的方法
  • 原文地址:https://www.cnblogs.com/xxflz/p/13395509.html
Copyright © 2011-2022 走看看