![]() ![]() When used as a plugin Vue Router registers a globally available component called. We know how to create routes that display different components under certain URLs but where exactly those components are rendered? It's called a hash mode and is a default value of mode property. Otherwise every URL will be prefixed with hash (for example /#/contact). It's important to remember about setting mode property value to " history". It's a good practice to display a dedicated 404 page for those routes and so we did in this example. Setting path property as "*" will match every other route that wasn't already specified (like /about). In that case HomePage component will be treated as entry route of our application (so it will be displayed when someone enters /) and ContactPage will be displayed after entering /contact. It's pretty self-descriptive isn't it? Essentially we are just matching Vue components with URLs. Import PageNotFound from “/PageNotFound.vue” Import ContactPage from “/ContactPage.vue “ Let's see how very basic router could look like: Import HomePage from “/HomePage.vue “ Route object is nothing else but a JavaScript object representation of single route in your application. The most important property of this object is routes which accepts array of so called route objects. Vue Router instance that we've just created accepts object as a parameter (similar to Vue instance). In the same file create new Vue Router instance and pass it to root Vue instance.Īnd that's all! You have a working Vue Router registered in your application! This process is similarly simple for almost every Vue plugin.Įven though we installed Vue Router it's not doing anything meaningful yet.Otherwise plugin will not work properly import Vue from “vue” ![]() It's important to do this before instantiating root Vue instance. Just use Vue.use() method In your JavaScript entry point (usually it's a main.js). Import Vue Router plugin and register it.It will install Vue Router as new dependency of your project. In command line interface on the root of your app run "npm install -save vue-router" script. To add Vue Router plugin to our application we need to follow 3 very easy steps: To install a plugin simply use "use()" function of Vue object and pass the plugin object to it. " and this is a best description of what they do. As we can read in Vue docs "Plugins usually add global-level functionality to Vue. They could enrich your application with additional functionality. We havn't touched this concept before but plugins in Vue are the same things as plugins in any other piece of software. If we would like to display different content on /about and /contact we should create a route for each URL and associate them with a component of our choice. What is a route?Ī single route is usually a component associated with certain URL. In this article we will explore Vue Router - a plugin that lets you create a Single Page application with multiple views. This term refers to the fact that only parts of the UI are refreshed which prevents full page reloads and provides a better user experience. Even though modern JavaScript apps are called Single Page Apps it doesn't really mean that they contain only one view. Part 3: Communicating between Vue componentsĪll that we already learned was oriented around creating very simple applications with single view.Part 2: Vue instance and its properties.Part 1: Introduction to Vue - key concepts and why it's so awesome.This article is part 6 of the series on Vue.js. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |