前端Vue2-Day61

路由传参params：

① 配置路由，声明接收params参数：在path路径以占位符：形式声明参数！

export default new VueRouter({
    routes: [{
        path: '/father',
        component: Father,
        children: [{
            name: 'son',
            path: 'son/:data1/:data2',
            component: Son,
        }]
    }]
})

 

② 传递参数：若使用对象写法，则不能声明path，必须使用name进行跳转！

<router-link to="`/father/son/${data1}/${data2}`">字符串写法</router-link>
<router-link to="{
    name:'son',
    params: {
        data1,
        data2
    }
}">对象写法</router-link>

 

③ 接收参数：$route.params.xxx

 

路由props配置：让路由组件更方便的接收参数

旧版：$route.query.data或$route.params.data

在路由内使用props配置，在组件内直接用props接收：

export default new VueRouter({
    routes: [{
        path: '/demo',
        component: Demo,
        // 第一种 使用对象形式(只能传输死数据)
        props: { data },
        // 第二种 使用布尔值，为true会将路由携带的params参数直接传入组件
        props: true,
        // 第三种 使用函数，默认参数$route，直接传值
        props($route) {
            return {
                id: $route.query.id,
                name: $route.query.name
            }
        },
        // 可以使用连续解构赋值对第三种优化
        props({ query: { id, name } }) {
            return {
                id, 
                name
            }
        }
    }]
})

 

router-link的replace属性：控制跳转是否可以回退

① 作用：控制路由跳转时操作浏览器历史记录的模式。

② 浏览器的历史记录有两种写入方式：为push和replace，push为追加历史记录，replace为替换当前记录。路由跳转时默认为push。

③ 开启replace模式：

 

<router-link to="/home" :replace="true"></router-link>
// 简写
<router-link to="/home" replace></router-link>