when registering a route with vue router, component is generated by parsing the md file with vue markdown loader
router.component = r =>
require.ensure([], () => r(require(`../docs/${router.name}.md`)));the page structure is as follows:
<template>
<router-view :class="$style.view"></router-view>
<anchor-nav :anchos="textAnchors"></anchor-nav>
</template>now, when the router-view is updated, you need to get the id, of some elements of dom in the updated router-view to be used as anchor navigation.
document.querySelectorAll("h2") what should I do?
method that has been tried now:
1. The parent component mouted and update both call document.querySelectorAll ("H2") once, and it"s okay to get this value, but the page will get stuck when passing this value to anchor-nav in the above example. I don"t know why.
2. Use vue router"s navigation guard
but according to the complete navigation parsing process of the official website:
1 navigation is triggered.
2 is called away from the guard in the deactivated component.
3 invokes the global beforeEach guard.
4 invokes the beforeRouteUpdate guard (2.2 +) in the reused component.
5 calls beforeEnter in the routing configuration.
6 parses the asynchronous routing component.
7 calls beforeRouteEnter in the activated component.
8 calls the global beforeResolve guard (2.5 +).
9 Navigation confirmed.
10 calls the global afterEach hook.
11 triggers a DOM update.
12 calls the callback function passed to next in the beforeRouteEnter guard with the created instance.
cannot get the value of dom in router view after dom update.
ask the bosses if there is a better way. Personally, I can also think of a way to define mouted,update these methods for parsing generated components, but I don"t know what to do = _ =.