Vue 2.x – 路由的props配置/replace属性

7.路由的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
        }
    }
}

8.<router-link>的replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式:分别为push``replace``push`是追加历史记录,`replace`是替换当前记录。路由跳转时候默认为`push
  3. 如何开启replace`模式:`<router-link replace .......>News</router-link>

代码

https://github.com/icrons/Vue-Learn/tree/master/35_src_%E8%B7%AF%E7%94%B1props%E9%85%8D%E7%BD%AE

https://github.com/icrons/Vue-Learn/tree/master/36_src_router-link%E7%9A%84replace%E5%B1%9E%E6%80%A7

版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/143.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
Vue 2.x – 路由的props配置/replace属性
7.路由的props配置 ​ 作用:让路由组件更方便的收到参数 { name:'xiangqing', path:'detail/:id', component:Detail, ……
<<上一篇
下一篇>>