Vue路由(route)中的props配置

并非组件间(父组件=>子组件)有props配置传递参数,路由(route)当中也有props配置传递参数,数据的.
Vue-router中的props配置的作用是让路由组件更加方便的接收到参数

使用场景如下所示:

当我们使用路由(route)去接收组件通过query或者params传过来的参数时,一般是这样设置接收的
当要求接收的参数过多时,模板代码就会显得非常的复杂冗余,如下:
这时我么也许会想到使用计算属性(computed)去解决问题,如下:
但是当要求接收的参数很多时,你的计算属性就同样会要求写非常多重复的代码去代替插值入口,因此使用计算属性去简化接收参数并不是最好的办法反而会让问题变得更加复杂.

Vue中的props配置

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

{
   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[显示代码片段]

// 一级路由
routes:[
    {   
        //设置管理路由:Home
        path:'/home',
        component: Home,
        
        // 二级路由(children属性)
        children:[//通过children配置子级路由
            {
                // 使用二级路由过后的path不需要再加上"/"
                path:'message',
                component: Message,

                // 使用三级路由
                children:[
                    {
                        // 给这个三级路由命名未"xiangqing"
                        name : 'xiangqing',
                        //后面两个(/:id/:title)为params的占位符
                        // 一定要设置,否者会接收不到参数
                        path:'detail/:id/:title',
                        component: Detail,

                        // props的第一种写法,值为对象
                        // 声明props配置,该对象中所有的key-value的组合最终都会通过props传给指定组件(这里是Detail组件)
                        props:{a:1,b:'hello'}
                    }
                ]
            },
        ]
    },
]

Detail组件(路由组件)

<template>
    <ul>
        <!-- 输出本地route上的params身上的指定参数即可 -->
        <li>消息编号:{{this.$route.params.id}}</li>
        <li>消息标题:{{this.$route.params.title}}</li>
        <li>a:{{a}},b:{{b}}</li>
    </ul>
</template>

<script>
    export default {
        name : 'Detail',
// 方法一(接收路由传过来的数据可直接在模板上使用)
        // 设置props接收路由传过来的数据
        props:['a','b'],
        mounted(){
            // 输出本地的route发现里面多了一个params参数
            // params参数里面携带者url传过来的数据
            console.log(this.$route);
        }   
    }
</script>

结果展示:

缺点:项目开发基本不用,因为它只能用来传死数据

写法二:

router-index.js[显示代码片段]

// 一级路由
routes:[
    {   
        //设置管理路由:Home
        path:'/home',
        component: Home,
        
        // 二级路由(children属性)
        children:[//通过children配置子级路由
            {
                // 使用二级路由过后的path不需要再加上"/"
                path:'message',
                component: Message,

                // 使用三级路由
                children:[
                    {
                        // 给这个三级路由命名未"xiangqing"
                        name : 'xiangqing',
                        //后面两个(/:id/:title)为params的占位符
                        // 一定要设置,否者会接收不到参数
                        path:'detail/:id/:title',
                        component: Detail,

                        // props的第一种写法,值为对象
                        // 声明props配置,该对象中所有的key-value的组合最终都会通过props传给指定组件(这里是Detail组件)
                        // props:{a:1,b:'hello'}

                        // props的第一种写法,值为布尔值
                        // 声明props配置,布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
                        props: true

                    }
                ]
            },
        ]
    },
]

Detail组件(路由组件)

<template>
    <ul>
        <!-- 输出本地route上的params身上的指定参数即可 -->
        <li>消息编号:{{id}}</li>
        <li>消息标题:{{title}}</li>
    </ul>
</template>

<script>
    export default {
        name : 'Detail',
        // 方法二(直接接收params传过来的参数可直接在模板上使用)
        // 设置props接收路由传过来的数据
        props:['id','title'],
        mounted(){
            // 输出本地的route发现里面多了一个params参数
            // params参数里面携带者url传过来的数据
            console.log(this.$route);
        }   
    }
</script>

结果展示:(通过params传过来的id和title可以正常读取)

缺点:只能将params参数通过props传给组件，query不行！

写法三:

router-index.js[显示代码片段]

// 一级路由
routes:[
    {   
        //设置管理路由:Home
        path:'/home',
        component: Home,
        
        // 二级路由(children属性)
        children:[//通过children配置子级路由
            {
                // 使用二级路由过后的path不需要再加上"/"
                path:'message',
                component: Message,

                // 使用三级路由
                children:[
                    {
                        // 给这个三级路由命名未"xiangqing"
                        name : 'xiangqing',
                        //后面两个(/:id/:title)为params的占位符
                        // 一定要设置,否者会接收不到参数
                        path:'detail',
                        component: Detail,

                        // props的第一种写法,值为对象
                        // 声明props配置,该对象中所有的key-value的组合最终都会通过props传给指定组件(这里是Detail组件)
                        // props:{a:1,b:'hello'}

                        // props的第二种写法,值为布尔值
                        // 声明props配置,布尔值为true，则把路由收到的所有params参数通过props传给指定组件(这里是Detail组件)
                        // props: true

                        // props的第三种写法,值为函数(较为高端的用法)
                        // 声明props配置,该函数返回的对象中每一组key-value都会通过props传给指定组件(这里是Detail组件)
                        props(route){//这里传入route($route也可以)就能获取到本地路由上的所有数据
                            return {
                                // 在通过对象赋值的方式传递数到指定的组件(route组件)即可
                                id: route.query.id,
                                title: route.query.title 
                            }

                        // 可以使用es6解构赋值写法更简单
                        //props({query: {id, title}}){
                        //    return {id, title}
                        //}
                        }
                    }
                ]
            },
]

Detail组件(路由组件)

<template>
    <ul>
        <!-- 输出本地route上的params身上的指定参数即可 -->
        <li>消息编号:{{id}}</li>
        <li>消息标题:{{title}}</li>
    </ul>
</template>

<script>
    export default {
        name : 'Detail',
        // 方法三(直接接收query传过来的参数可直接在模板上使用)
        // 设置props接收路由传过来的数据
        props:['id','title'],
        
        mounted(){
            // 输出本地的route发现里面多了一个params参数
            // params参数里面携带者url传过来的数据
            console.log(this.$route);
        }   
    }
</script>

结果展示:(通过query传过来的id和title可以正常读取)

优点:基本上没有什么限制,但是用法较为巧妙

`<router-link>`的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式[相当于堆栈]
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录[压栈]，replace是替换当前记录[浏览器无法回退和前进网页]。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

Vue路由(route)中的props配置

使用场景如下所示:

Vue中的props配置

案例代码展示:

写法一:

结果展示:

缺点:项目开发基本不用,因为它只能用来传死数据

写法二:

结果展示:(通过params传过来的id和title可以正常读取)

缺点:只能将params参数通过props传给组件，query不行！

写法三:

结果展示:(通过query传过来的id和title可以正常读取)

优点:基本上没有什么限制,但是用法较为巧妙

<router-link>的replace属性

`<router-link>`的replace属性