Vue笔记--Router路由--VueRouter--五、路由传参处理

五、路由传参处理

• 通过设置路由的props：true，通过组件的props接收
• 实际上就是将vm.$route.params的值传给props
• 如果路由包含多个组件（命名视图）时，props需要根据组件的名称去一一对应设置
• 如果希望设置静态数据，可以将props的每个组件对应的选项设置为对象，内部属性会绑定给组件的props

示例

    <!-- 路由传参处理 -->
    <div id="app">
        <router-link to="/index/11">第一个跳转</router-link>
        <router-link to="/index/12">第二个跳转</router-link>
        <router-link to="/content/13">第三个跳转</router-link>
        <router-link to="/content/14">第四个跳转</router-link>

        <router-view></router-view>
        <router-view name='content'></router-view>
        <router-view name='title'></router-view>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        const routes = [{
                path: '/index/:id',
                component: {
                    template: `<div>通过$route.params获取参数{{ $route.params }}</div>`
                }
            },
            {
                path: '/content/:id',
                props: {
                    // 用于设置组件能否以props属性获取到参数，true不影响$route.params获取参数，但是false会导致props获取不到参数
                    // 多个组件的情况必须要以{}形式,分开设置
                    content: true,
                    default: true,
                    // 传入静态数据
                    title: {
                        id: 100,
                        name: 'tiele'
                    }
                },
                components: {
                    content: {
                        template: `<div>通过$route.params获取参数{{ $route.params }}</div>`
                    },
                    default: {
                        props: ['id'],
                        template: `<div>通过 id 获取参数{{ id }}</div>`
                    },
                    title: {
                        // 接收路由props传过来的静态数据
                        props: ['id', 'name'],
                        // 访问当前组件接收到的数据
                        template: `<div>通过props传入静态数据{{ id }} {{ name }}</div>`
                    }
                }
            }
        ]
        const router = new VueRouter({
            routes
        })
        new Vue({
            el: '#app',
            router
        })
    </script>