Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the use of vue.js routing", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what's the use of vue.js routing"?

Routing is the process in which a router receives a packet from one interface, directs it according to its destination address, and forwards it to another interface.

Vue.js routing allows us to access different content through different URL.

Multi-view single-page Web application (single page web application,SPA) can be realized through Vue.js.

Vue.js routing needs to be loaded into the vue-router library

However, when using routing, url also changes. Users can directly copy or collect the url of the current page to others when browsing a web page, which is friendly to both search engines and users.

Simple example

Vue.js + vue-router can easily implement a single page application.

Is a component that sets up a navigation link to switch between different HTML content. The to attribute is the destination address, which is what you want to display.

In the following example, we add vue-router, configure the components and route maps, and tell vue-router where to render them. The code is as follows:

HTML code

Hello App!

Go to Foo Go to Bar

JavaScript code

/ / 0. If you use modular programming, import Vue and VueRouter, call Vue.use (VueRouter) / / 1. Define (route) components. / / you can enter const Foo = {template: 'foo'} const Bar = {template:' bar'} / / 2 from another file import. Define routes / / each route should map a component. Where "component" can be a component constructor created by Vue.extend (), or just a component configuration object. / / We'll talk about nested routing later. Const routes = [{path:'/ foo', component: Foo}, {path:'/ bar', component: Bar}] / / 3. Create a router instance, and then pass `routes` configuration / / you can also pass other configuration parameters, but let's keep it that simple. Const router = new VueRouter ({routes / / (abbreviated) is equivalent to routes: routes}) / / 4. Create and mount the root instance. / / remember to inject routing through the router configuration parameters, / / so that the entire application has the routing function const app = new Vue ({router}). $mount ('# app') / / now, the application has started!

The style class = "router-link-exact-active router-link-active" will be added to all the navigation links you click on.

At this point, I believe you have a deeper understanding of "what is the use of vue.js routing?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.