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

This article mainly introduces "how to install and configure vue-route routing management". In daily operation, I believe many people have doubts about how to install and configure vue-route routing management. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to install and configure vue-route routing management". Next, please follow the editor to study!

Introduction

Vue Router is the official route manager for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. The features included are:

Nested routes / View Chart

Modular, component-based routing configuration

Routing parameters, queries, wildcards

View transition effect based on Vue.js transition system

Fine-grained navigation control

Links with automatically activated CSS class

HTML5 historical mode or hash mode, automatically degraded in IE9

Custom scroll bar behavior

Installation

Installation command

Npm install vue-router-save

If you use it in a modular project, you must explicitly install the routing function through Vue.use ():

Modular use of import Vue from "vue" import VueRouter from "vue-router" Vue.use (VueRouter)

When we created the project using scaffolding vue-cli, we actually configured router. After creating the project, there will be a router folder in the project root directory and an index.js file under router, as follows:

Import Vue from "vue"; import VueRouter from "vue-router"; import Home from ".. / views/Home.vue"; / / 1. When we use other plug-ins, we must use Vue.use to install the plug-in Vue.use (VueRouter); / / 2. Define routes. Each route should map a component const routes = [{path: "/", name: "Home", component: Home,}, {path: "/ about", name: "About", component: About},]; / / 3. Create router instance const router = new VueRouter ({/ / configure the application relationship between routing and components routes, / / (abbreviation) is equivalent to routes: routes}); / / 4. Export the router object, and then reference export default router in main.js

This file is specially configured for routing. After exporting the router object, we can refer to it in the main.js of the project.

Import Vue from "vue"; import App from ". / App.vue"; import router from ". / router"; Vue.config.productionTip = false;new Vue ({router, / / add a router object to the vue instance, you can use routing render: (h) = > h (App),}). $mount ("# app")

Our two component codes, About and Home, are as follows:

/ / About.vue About export default {name: "About"} / / Home.vue Home export default {name: "Home",}

Finally, we write the following code in App.vue:

Template > Home page about

Use to load a link, and then use to to represent a jumped link. Will eventually be rendered as a label.

Is the exit of the route, that is, the code under the corresponding url will be rendered to this place.

HTML5 history mode

But when we start the program and visit the page, the url address appears #

This is because vue-router 's default hash mode uses URL's hash to simulate a full URL, so when the URL changes, the page does not reload.

If you don't want an ugly hash, you can use the routed history mode, which takes full advantage of history.pushState API to complete the URL jump without reloading the page.

Const router = new VueRouter ({mode: "history", routes: [...]})

We just need to add mode as history to the index.js under the router folder, and then revisit it, and the http://localhost:8080/ will not have a # number.

Note: history mode also requires background configuration support. Because our application is a single-page client application, if the background is not configured correctly, users will return 404 when they directly access other url addresses in the browser, which is not good-looking.

So, you need to add a candidate resource that covers all situations on the server: if the URL does not match any static resources, you should return the same index.html page, which is the page on which your app depends.

At this point, the study on "how to install and configure vue-route routing management" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.