vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题

router.js:

export default new Router({
routes: [ {
path: '/',
redirect: '/main',
},{
path: '/main',
name: 'Main',
component: ()=> import('@/views/Main'),
children: [
{
//path: '/testPage', //这种方式 不配置参数名, 页面刷新会丢失参数
path: '/testPage/:aaa/:bbb', //这样通过 name 和 params 进行路由传参时 , 刷新页面就不会丢失 参数aaa 和 bbb 了。
name: 'TestPage',
component: ()=> import('@/views/TestPage/TestPage')
},
] }, ]
})

调整函数:

        methods: {

            //路由调整传参测试

            goRouterTest(){
// this.$router.push('/testpage');
this.$router.push({ name: 'TestPage', params:{aaa: '111', bbb: '222'} });
} },

这样传参时,地址栏就会出现参数了。这样属性就不会丢失了。

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

//然后可以选择配合 路由解耦来使用

修改路由配置为:

        {
// path: '/testPage', //这种方式 不配置参数名, 页面刷新会丢失参数
path: '/testPage/:aaa/:bbb', //这样通过 name 和 params 进行路由传参时 , 刷新页面就不会丢失 参数aaa 和 bbb 了。
name: 'TestPage',
props: true, //若个要解耦的 到组件中 props 中。
component: ()=> import('@/views/TestPage/TestPage')
},

要调整的组件生命 props

<template>
<div class="TestPage">
Name路由传参{{$route.params}}
</div>
</template> <script>
export default {
name: "TestPage",
props: {
//将路由中的参数 aaa 和 bbb 解耦的 组件上的 props 上。
aaa: {
type: String
},
bbb: {
type: String
}
}, mounted() {
console.log('这是路由传的参数aaa', this.aaa, '这是路由传的参数bbb', this.bbb );
} }
</script> <style scoped> </style>

最后的效果(刷新不会丢失):

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

结束。

当然也可以通过 path 和 query 的方式进行传参  this.$router.push({path: 路由路径,query: {要传的产生} })

但是这不能进行 props 解耦。

------------------------------------2019711 配置可选路由参数-------------------------------------------

假如下面是我们的某个路由:

        {
path: 'examPaperMultiPurpose/:action/:id', //多加 ? 代表这个参数是可选的。
name: 'examPaperMultiPurpose',
title: '考卷管理',
notKeepAlive: true,
props: true,
component: () =>
import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

当我们这样进行页面跳转时:

this.$router.push( { name: 'examPaperMultiPurpose', params: {action: 'add'} } );

很显然我们在跳转时, 没有进行 id 参数 的 传递。我们在控制台也会看到这样的警告。

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

提醒 我们  缺少参数,id 是一个没有定义的。

当我们有时候不是 都想传递每个参数,我们可以 把参数配置成 可选的。配置方法为 在参数后只要多加一个  ? 即可,如下

        //新增、编辑、查询 考卷
{
path: 'examPaperMultiPurpose/:action?/:id?', //多加 ? 代表这个参数是可选的。
name: 'examPaperMultiPurpose',
title: '考卷管理',
notKeepAlive: true,
props: true,
component: () =>
import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

这样我们就把两个参数action 和 id 配置成可选的路由参数了, 当我们还进行上面的方式进行传参时。 就不会警告我们 缺少参数了。

详见:

响应路由参数的变化

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

路由组件传参

https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F

vue路由参数可选

https://blog.csdn.net/dfydn/article/details/79229123

上一篇:springMVC接收请求参数的几种方式


下一篇:springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例