Vue <router-view>用法

• <router-view>有什么作用

  • <router-view>一般用于路由管理。当我们需要对页面进行局部刷新的时候，就可以使用<router-view>。

• <router-view>具体使用场景

  • 例如，我们创建了一个侧边导航栏，并且需要使用侧边导航栏对主页面内容进行切换，主页面切换的时候保持侧边导航栏不变。（类似于掘金签到页面）。

• <router-view>使用方法

  • 主要是需要对router.js进行配置。

    {
      	path: '/router/view',
      	name: 'router:view',
        redirect: '/aPage', //页面将默认加载/aPage路由对应的组件
        children: [
          {
            path: '/aPage',
            name: 'aPage',
            component: () => import('@/components/aPage.vue')
          },
          {
            path: 'bPage',
            name: 'bPage',
            component: () => import('@/components/bPage.vue')
          }
        ]
    }
    

    上面是路由配置文件。

    /router/view是父路由path。

    children数组中是在父页面中进行切换的子路由path。当在父页面组件中使用this.$router.push({path: ‘/bPage’})，就会切换成bPage页面。

  • 父页面组件

    <template>
      <router-view></router-view>
      <SideMenu @clickA = 'handleClickA' @clickB = 'hanldeClickB' />
    </template>
    
    <script>
      import SideMenu from '@/componnets/SideMenu';
      export defineComponents({
        components: {
          SideMenu
        },
        method: {
          handleClickA(){
            this.$router.push({path: '/aPage'})
          },
          handleClickB(){
            this.$router.push({path: '/bPage'})
          }
        }
      })
    </script>