This is an open source framework of vue3 dynamic routing and dynamic menu based on vuecli+element-plus. On the whole, this project is very good. It can directly realize the functions of dynamic routing and menu management and realize rapid development. Support two-level menu management and nested routing management.
"Element Plus": "1.0.2-beta.70",
“vue”:“^3.0.0”，
"vue router": "4.0.0-0"
1, UNIUICLI 3 is a project based on vue3, which keeps pace with the times and has a sense of the times, following closely the footsteps of vue3.
2. The project only integrates two necessary JavaScript libraries, element-plus and vue-router, and does not integrate other JavaScript libraries. This means that you can install the JavaScript libraries you need according to your own project requirements, and avoid the trouble caused by too many project integration libraries.
3. Powerful component manager. In order to help you visually manage dynamic routes and menus, we have built-in "Component Management" function components to make route and menu management visual. At the same time, in order to better realize project management, we have added an optional json export function on the basis of vue2 version, so that you can quickly generate json data and generate user rights routing and menus.
4. Beautiful scenery framework. We have a built-in background management UI framework, through which you can quickly generate and build management projects. Of course, you can also build your favorite UI frame structure.
5. Less interference. In order to make the project more pure and give developers more control, we created a new unitui folder under the src folder to store our built-in parts. In order to start and understand your project easily, you can directly empty the contents of the ivews and components folders and rebuild your components, because the files in these directories are not important.
Unituicli3 is powerful because of component management, because it is the core component, which makes dynamic routing (add, delete and modify), nested routing and menu management (add, delete and modify) visible, supports json data generation, and makes foreground-background interaction possible. Permission editing can be realized only by storing the generated json in the database.
Although we try to minimize the impact on developers, it is inevitable to make some changes.
Import {createApp} from "vue"
Import ElementPlus from "element-plus"
Import applications from'. /App.vue '
Import router from'. /Router'
Import' @/unitui/init _ route.js'//This is to prevent the refresh route from being lost.
const app = createApp(App)
app.use(ElementPlus)
App.use (router) Mount (#app)
//Register the global component
Import Uicon from'. /unitui/sub/Uicon.vue '
app.component('Uicon '，Uicon)
If you don't use elementPlus as your UI, you can refer to the above and make appropriate changes.
This is a globally registered icon selector. You can use the icon selector in any component, which is installed in the main.js file. If you don't use element, you need to modify it, otherwise it may affect the function of icon selection.
Real effect
This is a very important built-in component, which is mainly used to simulate the operation and information generation when logging in. It reads two json generation menus and routing information located in the assets/json/ folder, and the json content simulates the content returned by the backend.
The most important thing is the generation of route. Call the init_route method after logging in and routing json information back. The code is as follows:
init_route(route_data) {
//Generate routes according to json data returned by the backend.
const init _ route _ data =[]； //Define a routing array to store the generated routing information.
For (set index = 0; Index & lt route _ data. Length; index++) {
//json returned by the loop backend
//cycle
If (route_data[index]. Child! = undefined) {
//Method for generating routing array when there are child nodes.
init_route_data[index] = {
Path: route_data[index]. Path,//routing url.
Name: route_data[index]. Name,//routing name.
component:()= & gt； import(`@/${route_data[index])。 Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
//Route some additional information
Show _ site:route _ data[ index]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Meta. web _ title// website title
},
Child: []//Nested route
};
For (let I = 0；; I< route _ data [index]. children.length; i++) {
Init _ route _ data[ index]. Children [i] = {
Path: route _ data [index]. Children [me]. Path,//routing url.
Name: route _ data [index]. Children [me]. Name,//routing name.
component:()= & gt； import(`@/${route_data[index])。 Children [me]. Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Children [me]. Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
//Route some additional information
Show _ site:route _ data[ index]. Children [me]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Children [me]. Meta. web _ title// website title.
}
};
}
} Otherwise {
//Method for generating non-child routing array
init_route_data[index] = {
Path: route_data[index]. Path,//routing url.
Name: route_data[index]. Name,//routing name.
component:()= & gt； import(`@/${route_data[index])。 Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
Show _ site:route _ data[ index]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Meta. web _ title// website title
}
};
//console . log(index)；
}
}
//console . log(init _ route _ data)； //Print the generated initialization routing array.
For (set index = 0; Index & lt route _ data. Length; index++) {
//Because addRoutes has been abandoned, you need to reuse AddRoutes for array addition.
This. $ router . add route(init _ route _ data[index])； //Add an array circularly
}
this . init _ menu()； //Execute the menu generation method
},
The other three can be modified at will.
In the dynamic routing project of vue2, calling the route generation method in the mounted method of app.vue file can refresh the route and prevent the route from being lost. However, in the same way in vue3, there will be an exception, because we jump before adding the route, so there will be no content on the refreshed page, so we create a new init_route.js in the unitui folder, write something similar to route initialization in the login.vue file, and then in the main.js
Init_route.js content
Import router from' @/router'
Function init_route() {
//Generate routes according to json data returned by the backend.
if(session storage . getitem(" route _ data ")！ = null) {
const route _ data = JSON . parse(session storage . getitem(" route _ data "))；
//console . log(route _ data)；
const init _ route _ data =[]； //Define a routing array to store the generated routing information.
For (set index = 0; Index & lt route _ data. Length; index++) {
//json returned by the loop backend
//cycle
If (route_data[index]. Child! = undefined) {
//Method for generating routing array when there are child nodes.
init_route_data[index] = {
Path: route_data[index]. Path,//routing url.
Name: route_data[index]. Name,//routing name.
component:()= & gt； import(`@/${route_data[index])。 Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
//Route some additional information
Show _ site:route _ data[ index]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Meta. web _ title// website title
},
Child: []//Nested route
};
For (let I = 0；; I< route _ data [index]. children.length; i++) {
Init _ route _ data[ index]. Children [i] = {
Path: route _ data [index]. Children [me]. Path,//routing url.
Name: route _ data [index]. Children [me]. Name,//routing name.
component:()= & gt；
import(`@/${route_data[index])。 Children [me]. Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Children [me]. Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
//Route some additional information
Show _ site:route _ data[ index]. Children [me]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Children [me]. Meta. web _ title// website title.
}
};
}
} Otherwise {
//Method for generating non-child routing array
init_route_data[index] = {
Path: route_data[index]. Path,//routing url.
Name: route_data[index]. Name,//routing name.
component:()= & gt； import(`@/${route_data[index])。 Component }`),
//component:(resolve)= & gt； require([`@/views/$ { route _ data[index])。 Component }`], resolve),//Load the vue file described by the back-end json.
Yuan: {
Show _ site:route _ data[ index]. meta。 Show _ site,//Is it displayed in full screen?
Web _ title:route _ data[ index]. Meta. web _ title// website title
}
};
//console . log(index)；
}
}
//console . log(init _ route _ data)； //Print the generated initialization routing array.
For (set index = 0; Index & lt route _ data. Length; index++) {
//Because addRoutes has been abandoned, you need to reuse AddRoutes for array addition.
router . add route(init _ route _ data[index])； //Add an array circularly
}
//Put the refresh here
//console . log(' app ')；
//const index = window . location . href . lastindexof(" # ")
//const URL = window . location . href . substring(index+ 1，window . location . href . length)；
//this. $router.push(url)
}
}
init_route()
References in main.js:
Import' @/unitui/init _ route.js'//This is to prevent the refresh route from being lost.
At this point, the refresh automatic initialization can be completed.
We control the display position by getting the value of meta. Display _site (full screen display 0, view display 1) in the route in the app.vue file, and then use v-if to control the display of different router-view.
App.vue source code:
1. If you don't like our ui framework, you need to develop a new ui. Without the support of ui framework, the function of component management may not be displayed normally (blank display). You can change the style section in the file unitui/ subadmin/ SubAdmin.vue to:
#sub_admin_back {
Width:100%;
/* The non-ui framework writes the height as height:100 VH; */
Height:100 VH;
Background-size: cover;
Location: relative;
Background color: # ffffff
Border-radius:10px;
}
1, the interference to the framework has not been reduced as much as possible, and it is still necessary to make appropriate changes to main.js