Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
najiu-admin-template
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
najiu-frontend
najiu-admin-template
Commits
fef36440
Commit
fef36440
authored
Dec 04, 2020
by
vben
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: page switching did not return to the top
parent
f4621cc6
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
42 additions
and
30 deletions
+42
-30
index.ts
src/router/guard/index.ts
+12
-1
index.ts
src/router/index.ts
+3
-1
scrollBehaviour.ts
src/router/scrollBehaviour.ts
+27
-28
No files found.
src/router/guard/index.ts
View file @
fef36440
import
{
isNavigationFailure
,
Router
}
from
'
vue-router
'
;
import
{
isNavigationFailure
,
Route
LocationNormalized
,
Route
r
}
from
'
vue-router
'
;
import
{
Modal
,
notification
}
from
'
ant-design-vue
'
;
import
{
Modal
,
notification
}
from
'
ant-design-vue
'
;
...
@@ -19,6 +19,12 @@ import { REDIRECT_NAME } from '/@/router/constant';
...
@@ -19,6 +19,12 @@ import { REDIRECT_NAME } from '/@/router/constant';
const
{
closeMessageOnSwitch
,
removeAllHttpPending
}
=
useProjectSetting
();
const
{
closeMessageOnSwitch
,
removeAllHttpPending
}
=
useProjectSetting
();
const
globSetting
=
useGlobSetting
();
const
globSetting
=
useGlobSetting
();
const
body
=
document
.
body
;
const
isHash
=
(
href
:
string
)
=>
{
return
/^#/
.
test
(
href
);
};
export
function
createGuard
(
router
:
Router
)
{
export
function
createGuard
(
router
:
Router
)
{
let
axiosCanceler
:
Nullable
<
AxiosCanceler
>
;
let
axiosCanceler
:
Nullable
<
AxiosCanceler
>
;
if
(
removeAllHttpPending
)
{
if
(
removeAllHttpPending
)
{
...
@@ -45,8 +51,13 @@ export function createGuard(router: Router) {
...
@@ -45,8 +51,13 @@ export function createGuard(router: Router) {
});
});
router
.
afterEach
((
to
,
from
,
failure
)
=>
{
router
.
afterEach
((
to
,
from
,
failure
)
=>
{
// scroll top
isHash
((
to
as
RouteLocationNormalized
&
{
href
:
string
})?.
href
)
&&
body
.
scrollTo
(
0
,
0
);
loadedPageMap
.
set
(
to
.
path
,
true
);
loadedPageMap
.
set
(
to
.
path
,
true
);
const
{
t
}
=
useI18n
();
const
{
t
}
=
useI18n
();
// change html title
// change html title
to
.
name
!==
REDIRECT_NAME
&&
setTitle
(
t
(
to
.
meta
.
title
),
globSetting
.
title
);
to
.
name
!==
REDIRECT_NAME
&&
setTitle
(
t
(
to
.
meta
.
title
),
globSetting
.
title
);
...
...
src/router/index.ts
View file @
fef36440
...
@@ -8,9 +8,11 @@ import { createGuard } from './guard/';
...
@@ -8,9 +8,11 @@ import { createGuard } from './guard/';
import
{
basicRoutes
}
from
'
./routes/
'
;
import
{
basicRoutes
}
from
'
./routes/
'
;
import
{
scrollBehavior
}
from
'
./scrollBehaviour
'
;
import
{
scrollBehavior
}
from
'
./scrollBehaviour
'
;
export
const
hashRouter
=
createWebHashHistory
();
// app router
// app router
const
router
=
createRouter
({
const
router
=
createRouter
({
history
:
createWebHashHistory
()
,
history
:
hashRouter
,
routes
:
basicRoutes
as
RouteRecordRaw
[],
routes
:
basicRoutes
as
RouteRecordRaw
[],
strict
:
true
,
strict
:
true
,
scrollBehavior
:
scrollBehavior
,
scrollBehavior
:
scrollBehavior
,
...
...
src/router/scrollBehaviour.ts
View file @
fef36440
// see https://github.com/vuejs/vue-router-next/blob/master/playground/scrollWaiter.ts
import
type
{
RouteLocationNormalized
}
from
'
vue-router
'
;
// class ScrollQueue {
// private resolve: (() => void) | null = null;
// private promise: Promise<any> | null = null;
// add() {
// this.promise = new Promise((resolve) => {
// this.resolve = resolve as () => void;
// });
// }
// flush() {
// this.resolve && this.resolve();
// this.resolve = null;
// this.promise = null;
// }
// async wait() {
// await this.promise;
// }
// }
// const scrollWaiter = new ScrollQueue();
/**
/**
* Handles the scroll behavior on route navigation
* Handles the scroll behavior on route navigation
*
*
...
@@ -8,10 +32,9 @@
...
@@ -8,10 +32,9 @@
*/
*/
// @ts-ignore
// @ts-ignore
export
async
function
scrollBehavior
(
to
,
from
,
savedPosition
)
{
export
async
function
scrollBehavior
(
to
,
from
,
savedPosition
)
{
await
scrollWaiter
.
wait
();
//
await scrollWaiter.wait();
// Use predefined scroll behavior if defined, defaults to no scroll behavior
// Use predefined scroll behavior if defined, defaults to no scroll behavior
const
behavior
=
document
.
documentElement
.
style
.
scrollBehavior
||
'
auto
'
;
const
behavior
=
'
smooth
'
;
// Returning the `savedPosition` (if available) will result in a native-like
// Returning the `savedPosition` (if available) will result in a native-like
// behavior when navigating with back/forward buttons
// behavior when navigating with back/forward buttons
if
(
savedPosition
)
{
if
(
savedPosition
)
{
...
@@ -24,7 +47,7 @@ export async function scrollBehavior(to, from, savedPosition) {
...
@@ -24,7 +47,7 @@ export async function scrollBehavior(to, from, savedPosition) {
}
}
// Check if any matched route config has meta that discourages scrolling to top
// Check if any matched route config has meta that discourages scrolling to top
if
(
to
.
matched
.
some
((
m
:
any
)
=>
m
.
meta
.
scrollToTop
===
false
))
{
if
(
to
.
matched
.
some
((
m
:
RouteLocationNormalized
)
=>
m
.
meta
.
scrollToTop
===
false
))
{
// Leave scroll as it is
// Leave scroll as it is
return
false
;
return
false
;
}
}
...
@@ -32,27 +55,3 @@ export async function scrollBehavior(to, from, savedPosition) {
...
@@ -32,27 +55,3 @@ export async function scrollBehavior(to, from, savedPosition) {
// Always scroll to top
// Always scroll to top
return
{
left
:
0
,
top
:
0
,
behavior
};
return
{
left
:
0
,
top
:
0
,
behavior
};
}
}
// see https://github.com/vuejs/vue-router-next/blob/master/playground/scrollWaiter.ts
class
ScrollQueue
{
private
resolve
:
(()
=>
void
)
|
null
=
null
;
private
promise
:
Promise
<
any
>
|
null
=
null
;
add
()
{
this
.
promise
=
new
Promise
((
resolve
)
=>
{
this
.
resolve
=
resolve
as
()
=>
void
;
});
}
flush
()
{
this
.
resolve
&&
this
.
resolve
();
this
.
resolve
=
null
;
this
.
promise
=
null
;
}
async
wait
()
{
await
this
.
promise
;
}
}
export
const
scrollWaiter
=
new
ScrollQueue
();
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment