Vue知识点: 路由的params参数

最新推荐文章于 2024-09-11 22:07:54 发布

原创最新推荐文章于 2024-09-11 22:07:54 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了在Vue.js的路由配置中如何声明和接收params参数，包括在父路由和子路由中的使用。通过`router-link`组件，可以使用字符串或对象写法传递参数。接收参数时，通过`$route.params`访问。

1. 配置路由，声明接收params参数

{
   path: '/home',
   component: Home,
   children:[
      {
         path: '/news',
         components: News,
      },
      {
         path: '/message',
         component: Message,
         children:[
            name: 'xiangqing',
            path: 'detail/:id/:title', // 使用占位符声明接收params参数
            component: Detail
         ]
      }
   ]
}

2. 传递参数

//跳转并携带params参数，to的字符串写法
<router-link :to="home/message/detail/${m.id}/${m.title}">跳转</router-link>
//跳转并携带params参数，to的对象写法
<router-link 
	:to="{
	    name: 'xiangqing',
	    params:{
	       id: m.id,
	       title: m.title
	    }
	}">
	跳转
</router-link>