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