vue路由传参

query传参

1. 字符串写法：

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

1. 对象写法

<router-link :to="{ // path:'/home/message/detail', name:'xiangqing', query:{ id:m.id, title:m.title } }"> {{m.title}} </router-link>

params传参

1. 字符串写法

• 路由配置

{ path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', component:Detail }, ] }

• 组件实现跳转

<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

1. 对象写法

<router-link :to="{ name:'xiangqing', params:{ id:m.id, title:m.title } }"> {{m.title}} </router-link>

区别：

• query字符串形式传参是以问号开始，而params传参则是直接跟在路径后面以"/"开始但需要在配置路由时添加参数
• query对象写法可以和path以及name搭配使用，但是params只能和name使用