docs: normalize links

diff --git a/docs/guide/advanced/navigation-guards.md b/docs/guide/advanced/navigation-guards.md
index b4fb075c61b7ba1593e27173a36e4f5c58856fad..0a978cfbb900b0b5db498a38669406d137d24b2e 100644 (file)
--- a/docs/guide/advanced/navigation-guards.md
+++ b/docs/guide/advanced/navigation-guards.md
@@ -86,7 +86,7 @@ router.beforeResolve(async to => {
 })
 ```
 
-`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](../../cookbook/generic-data-fetching.md)
+`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](/cookbook/generic-data-fetching.md)
 
 ## Global After Hooks
 
@@ -98,7 +98,7 @@ router.afterEach((to, from) => {
 })
 ```
 
-They are useful for analytics, [changing the title of the page](../../cookbook/page-title.md), [accessibility](../../cookbook/announcing-navigation.md) and many other things.
+They are useful for analytics, [changing the title of the page](/cookbook/page-title.md), [accessibility](/cookbook/announcing-navigation.md) and many other things.
 
 They also reflect [navigation failures](./navigation-failures.md) as the third argument:
 

diff --git a/docs/guide/index.md b/docs/guide/index.md
index 5c8bc8173dc395d57a758c759cf6f5d9da6117d2..b54ee193667387b7d9900f1eef62971398dc85eb 100644 (file)
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -63,9 +63,9 @@ const router = VueRouter.createRouter({
 })
 
 // 4. Create and mount the root instance.
+const app = Vue.createApp({})
 // Make sure to _use_ the router instance to make the
 // whole app router-aware.
-const app = Vue.createApp({})
 app.use(router)
 
 app.mount('#app')
@@ -73,7 +73,7 @@ app.mount('#app')
 // Now the app has started!
 ```
 
-By injecting the router, we get access to it as `this.$router` as well as the current route as `this.$route` inside of any component:
+By calling `app.use(router)`, we get access to it as `this.$router` as well as the current route as `this.$route` inside of any component:
 
 ```js
 // Home.vue
@@ -96,32 +96,6 @@ export default {
 }
 ```
 
-To access the router or the route inside the `setup` function, call the `useRouter` or `useRoute` functions:
-
-```js
-// Home.vue
-const { computed } = Vue
-const { useRouter, useRoute } = VueRouter
-
-export default {
-  setup() {
-    const router = useRouter()
-    const route = useRoute()
-
-    const username = computed(() => route.params.username)
-    function goToDashboard() {
-      if (isAuthenticated) {
-        router.push('/dashboard')
-      } else {
-        router.push('/login')
-      }
-    }
-
-    return { username, goToDashboard }
-  },
-}
-```
-
-We will learn more about this in [the Composition API](/guide/advanced/composition-api.md)
+To access the router or the route inside the `setup` function, call the `useRouter` or `useRoute` functions. We will learn more about this in [the Composition API](/guide/advanced/composition-api.md#accessing-the-router-and-current-route-inside-setup)
 
 Throughout the docs, we will often use the `router` instance. Keep in mind that `this.$router` is exactly the same as directly using the `router` instance created through `createRouter`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing.