路由传参的方式有哪些？

最新推荐文章于 2023-06-06 21:31:20 发布

原创最新推荐文章于 2023-06-06 21:31:20 发布 · 2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文详细介绍了Vue-router的四种参数传递方式：1) 通过route的name属性传递；2) 在`<router-link>`的to属性中传参；3) 利用url路径中的冒号动态绑定参数；4) 使用query参数进行传递。每种方法都配合代码示例进行了说明。

Vue-router 参数传递

声明式的导航<router-link :to="...">和编程式的导航router.push(...)都可以传参，本文主要介绍前者的传参方法，
同样的规则也适用于编程式的导航。

1. 用name传递参数

在路由文件src/router/index.js里配置name属性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

模板里(src/App.vue)用$route.name来接收比如：<p>{{ $route.name}}</p>

2. 通过标签中的to 传参

这种传参方法的基本写法：

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

比如先在src/App.vue文件中

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

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

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

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

{{$route.params.username}}-{{$route.params.id}}

3. 利用url传递参数—在配置文件里以冒号的形式设置参数

我们在/src/router/index.js文件里配置路由

{
        path:'/params/:newsId/:newsTitle',
        component:Params
}

我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<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>

在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了

<router-link to="/params/198/jspang website is very good">
Params
</router-link>

4. 使用path来匹配路由，然后通过query来传递参数

<router-link :to="{ name:'Query',query: { queryId:  status }}" >
    router-link跳转Query
</router-link>

对应的路由配置

{
        path: '/query',
        name: 'Query',
        component: Query
}

我们可以获取的参数：

this.$route.query.queryId