您的位置: 首页  >  文章  >  Vue 路由传递参数 3种方法

Vue 路由传递参数 3种方法

分类: 文章 • 2025-02-20 23:29:22


一、用name传递参数

      

　　用name传值并显示在模板里：

    1. 在路由文件src/router/index.js里配置name属性。
       
      1
      2
      3
      4
      5
      6
      7
      routes: [
          {
            path: '/Message',
            name: 'Message',
            component: resolve => require(['../components/page/Message.vue'], resolve)
          }
      ]

          2.传值页面 写法 ：Vue 路由传递参数 3种方法

          注意：  listInfo 是值的名字， 在接收值的页面 需要用到                 

3.接收值的页面：

Vue 路由传递参数 3种方法

二、通过<router-link> 标签中的to传参

　　

上边的传参或许很不正规，也不方便，其实工作中多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

 
1
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

  • name：就是我们在路由配置文件中起的name值。
  • params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
Vue 路由传递参数 3种方法

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

 
1
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

 
1
{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

 
1
{{$route.params.username}}

vue-router 利用url传递参数　

　　:冒号的形式传递参数

　　　　　　在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。

  1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
     
    1
    2
    3
    4
    {
        path:'/params/:newsId/:newsTitle',
         component:Params
    }

    我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
  2. 在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
        <div>
            <h2>{{ msg }}</h2>
            <p>新闻ID：{{ $route.params.newsId}}</p>
            <p>新闻标题：{{ $route.params.newsTitle}}</p>
        </div>
    </template>
     
    <script>
    export default {
      name: 'params',
      data () {
        return {
          msg: 'params page'
        }
      }
    }
    </script>
     

     

  3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。
     
    1
    <router-link to="/params/198/jspang website is very good">params</router-link> |

　　正则表达式在URL传值中的应用

上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

 
1
path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。


相关推荐