路由组件的传参

※部分文字解释来源于vue官方文档

👉路由组件传参👈

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，这里有违背高内聚低耦合的设计标准，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

$route 的方式进行传值👇

    <div id="app">
        <ul>
            <router-link tag="li" to="/position/35" active-class="active">职位</router-link>
        </ul>
        <router-view></router-view>
    </div>
    
    <script>
    	//定义组件
        const position = {
            template: `<div>Position Page -{{$route.params.id}}</div>`
        }
        
        // 定义路由插件
        var router = new VueRouter({
            mode: "history",
            routes: [{
                path: '/position/:id',
                component: position//路由后显示的组件
            }]
        })

		//实例化vue
        var vm = new Vue({
            router,//实例中引入路由
            el: "#app",
            data: {}
        })

在模板中我们可以通过$route.params.id来获取路由地址中定义的id属性，但是上面提到过，这里会造成耦合度过高的情况

通过 props 解耦

props 设为布尔类型

在路由插件中，props可以设置为布尔类型，如果在路由插件中 props 被设置为 true，route.params 将会被设置为组件属性。😀

    <div id="app">
        <ul>
            <router-link tag="li" to="/position/35" active-class="active">职位</router-link>
        </ul>
        <router-view></router-view>
    </div>
    <script>
        const position = {
            props: ['id'],//获得传递的属性
            template: `<div>Position Page -{{id}}</div>`//{{id}}可直接调用
        }
        
        // 定义路由插件
        var router = new VueRouter({
            mode: "history",
            routes: [{
                props: true,//设置props的属性值为true
                path: '/position/:id',
                component: position
            }]
        })

		//vue实例
        var vm = new Vue({
            router,//实例中引入路由
            el: "#app",
            data: {}
        })
    </script>

显示👇，也可以取到地址栏中的id对应的值，并显示在组件中

如果遇到多组件这种奇奇怪怪😔的情况👇

两个都需要进行props的相应的设置，谁都跑不了嗷弟弟😃。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },//两个组件
      props: { default: true, sidebar: false }//两个都需要进行设置
    }
  ]
})

props设置为对象类型

在路由插件中，如果props设置为对象，则他就和往常一样是个组件属性，前提是props必须是静态的，为动态的话则不生效。😟，但是吧静态模式的话谁用它呢，奏是个弟弟嗷😊

    <div id="app">
        <ul>
            <router-link tag="li" to="/position" active-class="active">职位</router-link>
        </ul>
        <router-view></router-view>
    </div>
        //定义组件
        const position = {
            props: ['username','age'],//分别获取需要的属性
            template: `<div>Position Page -{{username}}-{{age}}</div>`
        }

        // 定义路由插件
        var router = new VueRouter({
            mode: "history",
            routes: [{
                props: {username:"朴海英",age:27},//静态
                path: '/position',
                component: position
            }]
        })

        //实例vue
        var vm = new Vue({
            router,//实例中引入路由
            el: "#app",
            data: {}
        })

显示👇

props设置为函数

在路由插件中我们可以将props设置为函数的形式，返回一个所需参数，VueRouter自动将把props设为函数的路由配置项传入自身的函数中，本例通过query取出路由地址栏中 ‘?’ 后面的内容并且return出去，组件获取return的数据并且显示出来

代码：👇

	<div id="app">
        <ul>
            <router-link tag="li" to="/position?father=陈天扬" active-class="active">职位</router-link>
            <!--这里设置路由地址和?后面的键值对-->
        </ul>
        <router-view></router-view>
    </div>
    <script>
        //定义组件
        const position = {
            props: ['query'],
            template: `<div>Position Page -{{query}}</div>`
        }

        // 定义路由插件
        var router = new VueRouter({
            mode: "history",
            routes: [{
                props: (route) => {//设置为函数的形式，参数route是本条路由配置项
                    return {
                        query: route.query.father//query获取地址栏中的father属性的值
                    }
                },
                path: '/position',
                component: position
            }]
        })

        //实例vue
        var vm = new Vue({
            router,//实例中引入路由
            el: "#app",
            data: {}
        })
    </script>