Adan Barbara Carrie Project address: Vue-simple-template Three roles: Adan Barbara Carrie Password: 123456

Adan has the highest permission A. He can see the red, yellow and blue pages (three pages in total).

Barbara has permission B and she can see the red and yellow pages

Carrie has permission C to see red and blue pages

Technology stack

Webpack ---- vue ---- JavaScript framework Vuex ---- implements state sharing between different components VUe-Router ---- page route babel-polyfill ---- converts ES6 code to ES5 code Normalize. CSS ---- resets the resetting style element-ui ---- UI component libraryCopy the code

Project initialization

CD to project folder
cd weven-simple-template
# Install dependencies (see package.json file for details of other dependencies installed in this project)
npm install
# Run the project
npm run dev
Copy the code

The project structure

After vue-cil scaffolding initializes the project, I only modify the SRC folder

SRC ├ ─ ─ App. Vue -- -- page entry ├ ─ ─ API, API request │ └ ─ ─ the login. The js - simulation json object data ├ ─ ─ assets - static resource such as theme font │ └ ─ ─ logo. The PNG ├ ─ ─ components -- component │ ├ ─ ─ index. The vue │ └ ─ ─ the login. The vue ├ ─ ─ the main, js - initializes the component Loading route ├ ─ ─ the router - routing │ └ ─ ─ index. The js └ ─ ─ Store ---- vuex State Management ├── index.js ├── login.jsCopy the code

Key points:

The key to dynamic routing is the Meta field configured on the router and vuex’s exposed getter field

// ---- router/index.js ---- // Initializes the routeexport default new Router({  
  routes: [
    {
      path: '/login',
      name: 'Login', component: Login } ] }); // Dynamic routing meta defines rolesexport const powerRouter =[    
    { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
      children: [
        { path: '/red', name: 'red', component: red,},
        { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
        { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}}]];Copy the code
// ----  main.js  ----
router.beforeEach((to, from, next) => {
    if(store.getters. Role){// Check whether role existsif(store.getters.newrouter.length ! == 0){next() //resolve hook}else{
	    	let newrouter
       		if (store.getters.role == 'A'Newrouter = powerRouter}else {
                let newchildren = powerRouter[0].children.filter(route => {
                    if(route.meta){
                    	if(route.meta.role == store.getters.role){
                    		return true
                        }
                        return false
                    }else{
                        return true}}); Newrouter = powerRouter newrouter[0]. Children = newChildren} router. AddRoutes (newrouter)'Roles',newrouter).then(res => { next({ ... to }) }).catch(() => { }) } }else{
       	if (['/login'].indexOf(to.path) ! == -1) { next() }else {
           next('/login')}}})Copy the code
// ---- components/index.vue ---- // mapGetters helper functions simply map the getters in the store to local computed properties... mapGetters(['newrouter'
    ])
    
Copy the code

There is no problem with this project to clarify the relationship between VUE +vuex+ VUE-Router. This is a super simple version, suitable for beginners. You can learn with relevant official documents. The above content says the key point, in fact, is also the whole project

Vue -simple-template project address: vUE -simple-template project address: VUE -simple-template project address: VUE -simple-template project

What questions are welcome to ask ~