What project is this?
Answer: This is a single page project, mainly to achieve automatic routing when not building. To put it simply, it is to dynamically add routes according to the URL when requesting the page.
Are there any restrictions on automatic routing?
Answer: Yes, because it is dynamically added through url, the relative path of component files must have a certain relationship with url in the specified folder. In the current demo project, the url path is consistent with the relative path of the component in the modules folder. For example:
URL address: localhost:5000/home/index
Component path: modules/home/index/
What can this method of automatic routing do?
answer:
1. Dynamic permission control: When the route is not matched, request the background to obtain whether the permission is available, and handle whether to add the route (whether access is allowed) based on the feedback from the background.
2. Automatically jump to home page, 404 page and other pages
Project demo address
Automatic routing of single-item:/bobowire//tree/master//onepage
Specific steps
1. Component generation
Add files in the router folder, the code is as follows:
Source code:
= file => () => import('@/modules/' + file + '.vue')
2. Intercept the route
In the src directory, add the file, the code is as follows:
Source code:
import router from './router'
const _import = require('./router/import')// Method to get components(async (to, from, next) => {
// Default homepage if ( === '/') {
next('/home/index')
} else if ( === 0) {
// Get component path let componentpath = (1) + '/' + (('/') + 1)
// Add route ([{
path: ,
name: (('/') + 1),
component: _import(componentpath)
}])
//Route rematch next({ ...to, replace: true })
} else {
next()
}
})
Summarize
The above is the vue automatic routing-single-page project introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!