Introduction
Vue is a single-page application (you can’t jump through the <a href="***"> in ordinary html). To switch the interface, we must understand what routing is and how routing is used in Vue .
1. What is Vue-Router
In order to make up for the lack of routing support in Vue during development, the official vue-routerplugin has been added . It is very important in the Vue ecological environment. In actual development, it will operate as long as one page is written vue-router.
For most single-page applications, it is recommended to use the officially supported vue-router library . For more details, please refer to the vue-router documentation .
1.1 Official explanation of Vue Router :
Vue Router is the official router of Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications with Vue.js. Features include:
- Nested route/view mapping
- Modular, component-based router configuration
- Routing parameter, query, wildcard
- View transition effects powered by the Vue.js transition system
- Fine-grained navigation control
- Link with auto active CSS class
- HTML5 history record mode or hash mode, with automatic backup in IE9
- Customizable scrolling behavior
1.2 Routing installation
We have chosen to install vue-router when we created the project. If it is not installed, you can use npm to install it. We can open the command line tool, enter the project directory, and enter the command to install the route:
npm install vue-router --save-dev1.3 Official introduction of routing entry
https://cn.vuejs.org/v2/guide/routing.html
https://router.vuejs.org/guide/#javascript
2. Getting started with configuration files
2.1 package.json
After installing vue-router, we can see the configuration information of vue-router in the dependencies in package.js.
2.2 src/router/index.js
The src/router/index.js file is the core file of routing. All the component paths we write in the future must be configured here. It manages all the link paths of the project.
2.3 vue-router mind map
Picture from: https://blog.csdn.net/qq_42346509/article/details/103371966
For detailed usage, please refer to: https://blog.csdn.net/qq_30904985/article/details/82316984
Three, blog routing small actual combat
3.1 New modules (Admin, Login, Main)
Admin-blog management platform, Login-blog login page, Main-blog homepage. In order to quickly achieve the routing effect, I simply created these three modules here, the code is as follows:
3.2 Configure routing
Vue-router configuration method:
- Method 1: Introduce the module before use;
- Method 2: vue-router configures routing, using vue's asynchronous component technology, can be loaded on demand.
3.2 Overall effect
The Main-blog homepage is displayed by default, login displays the login page, and admin displays the management platform page
