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'} });
            }

        },

 

這樣傳參時，地址欄就會出現參數了。這樣屬性就不會丟失了。

 

//然后可以選擇配合 路由解耦來使用

修改路由配置為：

        {
          // 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>

 

最后的效果（刷新不會丟失）：

結束。

 

當然也可以通過 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 參數 的 傳遞。我們在控制台也會看到這樣的警告。

提醒 我們  缺少參數，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