Vue2：路由的params参数用法

本文主要是介绍Vue2：路由的params参数用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、情景说明

在前面我们学习了路由的query参数用法
这里，我们学习一下params参数写法

二、案例

1、传递参数

index.js
修改了detail的path配置项，声明了两个变量名

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News,},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',component:Detail,}]}]}]
})

vc组件的router-link配置
写法1：
to的字符串写法
这种写法，就有点像SpringBoot项目中，Restful风格的@PathVariable参数写法

<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

写法2：
to的对象写法

                <!-- 跳转路由并携带params参数，to的对象写法 --><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>

2、接收参数

    <ul><li>消息编号：{{$route.params.id}}</li><li>消息标题：{{$route.params.title}}</li></ul>

三、注意事项

to的对象写法中，使用params携带参数，则不能使用path配置项，必须使用name配置项。

这篇关于Vue2：路由的params参数用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---