路由的params参数

文章目录

例子
小结

例子

本篇基于路由的query参数中的完整实例。params参数从路由组件Message.vue传递给路由组件Detail.vue。

修改了router/index.js。

import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";
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:"message",component:Message,children:[{name:"xiangqing",path:"detail/:id/:title",component:Detail}]},{path:"news",component:News}]}]
})

修改了路由组件Message.vue

<template><div><ul><li v-for="message in messageList" :key="message.id"><router-link :to="{path:'xiangqing',params:{id:message.id,title:message.title}}">{{message.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>
export default {name:"Message",data(){return {messageList:[{id:"001",title:"消息01"},{id:"002",title:"消息02"},{id:"003",title:"消息03"},]}}
}
</script><style></style>

修改了路由组件Detail.vue。

<template><ul><li>消息编号：{{$route.params.id}}</li><li>消息标题：{{$route.params.title}}</li></ul>
</template><script>
export default {name:"Detail",
}
</script><style></style>

小结

使用params参数在路由组件间传递数据有如下3步：

1. 路由规则中的path字段中，使用占位符声明接收params参数。

export default new VueRouter({routes:[{path:"/about",component:About},{path:"/home",component:Home,children:[{path:"message",component:Message,children:[{name:"xiangqing",path:"detail/:id/:title",component:Detail}]},{path:"news",component:News}]}]
})

2. 路由组件传送params参数。

第一种传递方式：to的字符串写法如下。

<template><div><ul><li v-for="message in messageList" :key="message.id"><router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template>

第二种传递方式：to的对象写法，如下。

<template><div><ul><li v-for="message in messageList" :key="message.id"><router-link :to="{name:'xiangqing',params:{id:message.id,title:message.title}}">{{message.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template>

注意哈：传递params参数时，如果使用to的对象写法，不能和path搭配使用，必须和name搭配使用。

3. 另一个路由组件接收params参数。

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

路由的params参数相关推荐

vue2进阶篇：vue-router之路由的params参数
文章目录 10.7路由的params参数案例:将案例改为"路由的params参数" 完整代码本人其他相关文章链接 10.7路由的params参数注意点1: 跳转路由并携带pa ...
路由传递params参数（vue）
文章目录嵌套路由的实现模板文件index.html 入口文件main.js App.vue(App组件) Header.vue(Header组件) router/index.js(路由规则文件) ...
[vue] 路由的params参数
配置路由,声明接收params参数 {path:'/home',component:Home,children:[{path:'news',component:News},{component:Mes ...
Vue路由传递params参数
【Vue路由】多级路由、路由传参、命名路由、params使用
文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由案例实验我们尝试做出如下的效果: 首先项目结构: 我们直接看四个路由组件: About.vu ...
动态匹配路由的基本用法||路由组件传递参数
动态匹配路由的基本用法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
React路由组件传递参数
向路由组件传递参数 1.params参数路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收):<Rou ...
路由的props参数
文章目录 props值是一个对象 props值是一个布尔值 props值是一个函数通过props接收params参数通过props接收query参数使用props参数,可以更方便的给路由组件传递 ...
Flask自定义转换器，实现路由匹配正则表达式参数
Flask框架动态路由实现参数传递和Django框架有类似之处,但是相比于Django框架,Flask实现复杂的参数就需要自己自定义转换器来实现了,而不能向Django那样直接使用正则表达式 1 # ...

路由的params参数

文章目录

例子

小结

路由的params参数相关推荐

最新文章

热门文章