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>