test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: fix the router behavior (#745)

Browse Source 
* feat(menu): recover router logic

* fix(breadcrumb): correctly access $router

Co-authored-by: liik <linyunqianpp@126.com>
This commit is contained in:
Square Coin 2020-12-01 17:34:03 +08:00 committed by GitHub
parent 2bcbcc8859
commit 0dc2388228
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/breadcrumb/src/item.vue
View File

@ -7,13 +7,25 @@
>
<slot></slot>
</span>
<i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
<span v-else class="el-breadcrumb__separator" role="presentation">{{ separator }}</span>
<i
v-if="separatorClass"
class="el-breadcrumb__separator"
:class="separatorClass"
></i>
<span v-else class="el-breadcrumb__separator" role="presentation">{{
separator
}}</span>
</span>
</template>
<script lang="ts">
import { defineComponent, inject, ref, onMounted } from 'vue'
import {
defineComponent,
inject,
ref,
onMounted,
getCurrentInstance,
} from 'vue'
interface IBreadcrumbInject {
separator: string
@ -40,11 +52,12 @@ export default defineComponent({
setup(props: IBreadcrumbItemProps, ctx) {
const link = ref(null)
const parent: IBreadcrumbInject = inject('breadcrumb')
const instance = getCurrentInstance()
const router = instance.appContext.config.globalProperties.$router
onMounted(() => {
link.value.setAttribute('role', 'link')
link.value.addEventListener('click', () => {
const router = (ctx as any).$router
if (!props.to || !router) return
props.replace ? router.replace(props.to) : router.push(props.to)
})

46
packages/menu/src/menu.vue
View File

@ -95,6 +95,7 @@ export default defineComponent({
const submenus = ref({})
const alteredCollapse = ref(false)
const rootMenuEmitter = mitt()
const router = instance.appContext.config.globalProperties.$router
const hoverBackground = useMenuColor(props.backgroundColor)
@ -187,7 +188,7 @@ export default defineComponent({
}) => {
const { index, indexPath } = item
const hasIndex = item.index !== null
// const oldActiveIndex = activeIndex.value
const oldActiveIndex = activeIndex.value
if (hasIndex) {
activeIndex.value = item.index
@ -198,31 +199,28 @@ export default defineComponent({
if (props.mode === 'horizontal' || props.collapse) {
openedMenus.value = []
}
// TODO: support vue-router
// const currentRouter = instance.appContext.config.globalProperties.$router
// if (currentRouter && hasIndex) {
// routeToItem(item, error => {
// activeIndex.value = oldActiveIndex
// if (error) {
// // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
// // https://github.com/ElemeFE/element/issues/17044
// if (error.name === 'NavigationDuplicated') return
// console.error(error)
// }
// })
// }
if (props.router && router && hasIndex) {
routeToItem(item, error => {
activeIndex.value = oldActiveIndex
if (error) {
// vue-router 3.1.0+ push/replace cause NavigationDuplicated error
// https://github.com/ElemeFE/element/issues/17044
if (error.name === 'NavigationDuplicated') return
console.error(error)
}
})
}
}
// const routeToItem = (item, onError) => {
// let route = item.route || item.index
// try {
// const currentRouter =
// instance.appContext.config.globalProperties.$router
// currentRouter?.push(route, () => null, onError)
// } catch (e) {
// console.error(e)
// }
// }
const routeToItem = (item, onError) => {
let route = item.route || item.index
try {
router?.push(route, () => null, onError)
} catch (e) {
console.error(e)
}
}
const updateActiveIndex = (val?: string) => {
const itemsInData = items.value