Example to async title post using skip

Author: ktquez

example/src/App.vue

@@ -10,6 +10,9 @@
       <h2>Essential Links</h2>
       <nav>
         <ul>
+          <li>
+            <router-link to="/posts/1" title="Go to post one page" aria-label="Go to example post page">My post</router-link>
+          </li>
           <li>
             <router-link to="/about" title="Go to about page" aria-label="Go to about page">About</router-link>
           </li>
@@ -20,9 +23,10 @@
       </nav>
     </header>
 
-    <div class="main" role="main">
+    <main class="main">
+      <hr>
       <router-view />
-    </div>
+    </main>
   </div>
 </template>
 
@@ -64,4 +68,9 @@ li {
 a {
   color: #227952;
 }
+.msg-error {
+  color: #d4351c;
+  padding: 10px;
+  font-weight: bold;
+}
 </style>

example/src/pages/About.vue

@@ -20,25 +20,16 @@ export default {
   name: 'About',
   data () {
     return {
-      title: '',
       errorMessage: null
     }
   },
   head () {
     return {
       title: {
-        inner: this.title
+        inner: 'About page'
       }
     }
   },
-  created () {
-    // get data post in server
-    setTimeout(() => {
-      this.title = 'Title of my awesome post'
-      this.$emit('updateHead')
-      this.$announcer.set(`${this.title} has loaded`, 'polite') // It's also possible to use the default complementRoute (this.$announcer.options.complementRoute)
-    }, 2000)
-  },
   methods: {
     notify () {
       this.errorMessage = 'It\'s error message'
@@ -47,11 +38,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.msg-error {
-  color: #d4351c;
-  padding: 10px;
-  font-weight: bold;
-}
-</style>

example/src/pages/Post.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>    
+    <template v-show="post.id">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </template>
+    <template v-show="error">
+      <h2 class="msg-error">{{ error }}</h2>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Post',
+  data () {
+    return {
+      post: {},
+      error: null
+    }
+  },
+  created () {
+    fetch(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)
+      .then(res => {
+        if (!res.ok) throw Error(res.statusText || 'Error loading the post')
+        return res.json()
+      })
+      .then(res => {
+        this.post = { ...res }
+        this.$announcer.set(`${this.post.title} has loaded`)
+      })
+      .catch(e => {
+        this.error = e.message
+        this.$announcer.set(this.error, 'assertive')
+      })
+  }
+}
+</script>

example/src/router.js

@@ -1,6 +1,7 @@
 import About from '@/pages/About'
 import Contact from '@/pages/Contact'
 import Home from '@/pages/Home'
+import Post from '@/pages/Post'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
@@ -23,7 +24,12 @@ const router = new VueRouter({
     {
       name: 'about',
       path: '/about',
-      component: About,
+      component: About
+    },
+    {
+      name: 'post',
+      path: '/posts/:id',
+      component: Post,
       meta: {
         announcer: {
           skip: true

src/index.js

@@ -45,7 +45,7 @@ export default function install (Vue, options = {}, router = null) {
       const announcer = to.meta.announcer || {}
 
       // Skip: Used, for example, when an async title exists, in which case the announcement is made manually by the set method.
-      // It is also possible to achieve the same result, using politeness: 'off', but it will be necessary 
+      // It is also possible to achieve the same result, using politeness: 'off', but it will be necessary
       // to set the "assertive" or "polite" when using the set method.
       // for example: this.$announcer.set('my async title', 'polite')
       if (announcer.skip) return