Vue-router—prop配置

最新推荐文章于 2024-08-21 15:44:13 发布

原创最新推荐文章于 2024-08-21 15:44:13 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue学习专栏收录该内容

63 篇文章

订阅专栏

本文介绍了VueRouter中props配置的三种方法，用于将参数传递给路由组件。第一种是通过对象直接定义props；第二种是设置props为true，自动传递params参数；第三种是使用函数动态返回props对象，可以根据$route获取数据。

### 7.路由的props配置

作用：让路由组件更方便的收到参数

```js

{
   name:'xiangqing',
   path:'detail/:id',
   component:Detail,
   //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
   //props:{a:900}
   //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
   //props:true
  
   //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
   props(route){
      return {
         id:route.query.id,
         title:route.query.title
     }
  }
}

```

router的index.js:


// 该文件专门用于创建整个应用的路由器
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:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}
                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            //只能传递params参数
                            // props:true
                            //props的第三种写法，值为函数
                            //注意一定要有返回值，返回值必须要是一个对象
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})