From: Eduardo San Martin Morote Date: Sat, 5 Sep 2020 12:37:16 +0000 (+0200) Subject: docs: normalize links X-Git-Tag: v4.0.0-beta.10~63 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5b8e0334407064db32b9e5f22f970a8a0f7bd786;p=thirdparty%2Fvuejs%2Frouter.git docs: normalize links --- diff --git a/docs/guide/advanced/navigation-guards.md b/docs/guide/advanced/navigation-guards.md index b4fb075c..0a978cfb 100644 --- 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 5c8bc817..b54ee193 100644 --- 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.