vue-router—10动态设置name属性左右切换

柔情只为你懂 2022-01-15 12:19 638阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

router里面设置meta

routes: [
        {
          path: '/',
          component: home,
          meta: {
            index: 0,
            title: 'home'
          }
        },
        {
          path: '/user/:tip?/:userId?',
          name: 'User',
          component: user,
          meta: {
            index: 3
          }
        },
        {
          path: '/home',
          name: 'Home',
          component: home,
          alias: '/index'
        },
        {
          path: '/about',
          component: about,
          children: [
            {
              path: '', // 默认的子路由  /about
              name: 'About',
              component: study,
              meta: {
                index: 2,
                title: 'about'
              }
            },
            {
              path: '/work',  // /work
              name: 'Work',
              component: work
            },
            {
              path: '/hobby', // /hobby
              name: 'Hobby',
              component: hobby
            }
          ]
        },
        {
          path: '/document',
          name: 'Dcoument',
          beforeEnter(to, from, next){
            console.log("beforeEnter")
            next()
          },
          meta: {
            index: 1,
            login: true,
            title: 'document'
          },
          components: {
            default: document,
            slider: slider
          }
        }
      ]
    })

App.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220115/fbfe5618dd524e84b91c8c4a6ad7bbea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220115/d7b4e695254e4a9d8c3e1b3d82194fef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220115/9465ae9ddf334e7e94a206696cf960ac.png