路由传参的方式【详解举例说明】

前言

路由传参可以通过声明式导航router-link:to="..."和编程式导航router.push(…)这两者来传参，不过本篇文章主要介绍前者的传参方法

Vue-router 传递参数

1. 使用name

在路由文件的/index.js配置name属性

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

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

2. 通过to

格式：

<router-link :to="{name:xxx,params:{属性名:属性值}}">valueString</router-link>

在App.vue文件中

<router-link :to="{name:'Ting',params:{age:18}">Ting</router-link>

在src/router/index.js配置该页面的路由

{path:'/ting',name:'Ting',component:Ting}

在模板里(src/components/Ting.vue)用$route.params.属性名来接受参数.

{{$route.params.age}}

3. 通过path匹配路由，通过query传递参数

<router-link :to="{ name:'Ting',query: { age: 18}}" >
    我跳跳跳 --- 
</router-link>

配置相对应的路由：

{
   path: '/ting',
   name: 'Ting',
   component: Ting
}

用这个来获取参数：

this.$route.query.age

4. 通过url

在路由文件的index.js配置

{
        path:'/mydata/:age/:hobby',
        component:Mydata
}

因为我们需要传递age和hobby两个参数，现在路由的index.js中配置好。
然后在src/components路径下创建一个Mydata.vue。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <p>我的年龄：{{ $route.params.age}}</p>
        <p>我的爱好：{{ $route.params.hobby}}</p>
    </div>
</template>
<script>
export default {
  name: 'mydata',
  data () {
    return {
    }
  }
}
</script>

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

<router-link to="/mydata/18/write code">
	mymymymy
</router-link>

总结

本篇文章的分享就到这里啦，大家可以关注博主期待后续的文章偶！