vue-router is an excellent routing solution for Vue.js, but requires additional configuration to update the page title and metadata on route change. There will be times where you will want the title of the browser to change when the page changes. And for SEO (search engine optimization), you will not want every search result or link to your website to say “Home Page” for all routes.
In this article, you’ll learn how to add this feature yourself. You will build an example Vue application with customizable page title and metadata on route change. To complete this tutorial, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment. This tutorial was verified with Node v14.6.0, npm v6.14.7, Vue.js v2.6.11, vue-router v3.2.0, and @vue/cli v4.4.6.
Instance Methods / Lifecycle
Let’s create a fresh Vue project. First, open your terminal and use vue-cli create a Vue project:. This long command is a set of presets based on defaults established by @vue/cli/packages/@vue/cli/lib/options.js. When reformatted for readability, it looks look like this:.
These presets add vue-router as a plugin (cli-plugin-router), enable history mode, add Babel, and add ESLint. For the needs of this tutorial, you will not require TypesScript, Progressive Web App (PWA) support, Vuex, CSS pre-processors, unit testing, or end-to-end (E2E) testing.
Next, navigate to the new project directory:. At this point, we have a fresh Vue Project to build upon. The next step will be defining sample routes in the application. Once we have established the structure of our application, we will be able to see title and meta changes in action.
In our example, our goal will be to construct an application consisting of:. a home route (/). an adjacent About route (/about). and a nested Frequently Asked Questions route (/about/frequently-asked-questions). Now, open main.js:. Take a moment to familiarize yourself with how VueRouter has been added by cli-plugin-router:.
Displaying the Data in a Table
Now, open router/index.js:. Take a moment to familiarize yourself with the routes for "Home" and "About" generated by cli-plugin-router. And add the route for the nested "Frequently Asked Questions":. This establishes our desired routing for this tutorial.
Notice that we are referencing a view that does not exist yet. We will address that next. Create a new file called FrequentlyAskedQuestions.vue in the views directory:. Then, add the template:. We have our new view, but we still need to reference it in the application. Now, open About.vue:. Next, add
Step 2 — Defining Sample Routes and Templates
We can run the following command:. And visit localhost:8080 in a web browser. Clicking on the navigation links should display the expected components. However, the
However, this will not result in updating the page title and metadata on route change. To accomplish that, we will need a custom navigation guard. In the route/index.js file, add a global navigation guard after the routes but before we export router:. At this point, we have a Vue application with routes, meta fields, and navigation guard. We can run the following command:. And visit localhost:8080 in a web browser. Now, when your routes change, the page
Likewise, the tags will update as well. In this tutorial, you learned how to use meta fields and navigation guards to update the page title and metadata on route change. If you use prerendering, then these changes will be baked into your prerendered HTML files and will work great for SEO. For SSR (server-side rendering), it can be a bit more complicated.
It’s also worth noting that dynamic, frequently-updating titles are out of the question with this method. You’ll probably have to stick with manually updating document.title for such use cases.
Vue 2 Snippets
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects. Modified5 months ago. I'm starting to play with vuejs (2.0).I built a simple page with one component in it.The page has one Vue instance with data.On that page I registered and added the component to html. The component has one input[type=text]. I want that value to reflect on the parent (main Vue instance).
How do I correctly update the component's parent data?Passing a bound prop from the parent is not good and throws some warnings to the console. They have something in their doc but it is not working. 8181 bronze badges. 6,11499 gold badges3030 silver badges4242 bronze badges. 3030 silver badges4242 bronze badges. Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit events and let the parent respond to those events. In your specific case, you could use a custom component with v-model. This is a special syntax which allows for something close to two-way binding, but is actually a shorthand for the event-driven architecture described above.