[Front-end] Vue system (6)

Hits: 0

Vue 2.0

6. view-router

1. Introduction to Routing

  • vue-router : a plugin library for vue, specially used to implement SPA applications
  • SPA application
    • Single page web application (SPA)
    • There is only one complete page for the entire application .
    • Clicking on the navigation links in the page will not refresh the page, but will only do a partial update of the page .
    • Data needs to be fetched via ajax request.
  • routing
    • A route is a set of mappings (key-value)
    • key is path, value may be function or component
  • Routing classification
    • Backend routing:
      • Understand: value is a function, which is used to process the request submitted by the client.
      • Working process: When the server receives a request, it finds a matching function according to the request path to process the request and returns the response data.
    • Front-end routing:
      • Understanding: value is a component, which is used to display page content.
      • Working process: When the path of the browser changes, the corresponding component will be displayed.

2. Basic use of routing

// main.js 
//Introduce Vue 
import Vue from  'vue' 
//Introduce App 
import App from  './App.vue' 
//Introduce VueRouter 
import VueRouter from  'vue-router' 
//Introduce router 
import router from  '. /router'

//Turn off Vue's production tip 
Vue.config.productionTip = false 
//Apply plugin
Vue.use(VueRouter)

//Create vm 
new Vue({
     el : '#app' ,
     render : h => h(App),
     router :router
})

// router/index.js 
// This file is specially used to create a router for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../components/About' 
import Home from  '../components /Home'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

// app.view
<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class = "list-group" > 
                    <!-- In the original html, we use a tag to achieve page jumps--> 
          <!-- <a class="list-group-item active" href="./about. html">About</a> --> 
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

                    <!-- Vue uses the router-link tag to achieve routing switching--> 
                    < router-link  class = "list-group-item"  active-class = "active"  to = "/about" > About </ router- link > 
          < router-link  class = "list-group-item"  active-class = "active"  to = "/home" > Home </ router-link > 
        </ div > 
      </ div > 
      < div  class = "col-xs-6">
        <div class = "panel" > 
          < div  class = "panel-body" > 
                        <!-- specify the rendering position of the component--> 
            < router-view > </ router-view > 
          </ div > 
        </ div > 
      </ div > 
    </ div > 
  </ div > 
</ template >

<script>
    export default {
        name:'App',
    }
</script>

// components/About.vue
<template>
    < h2 > I am About Content </ h2 > 
</ template >

<script>
    export default {
        name:'About'
    }
</script>

// components/Home.vue
<template>
    < h2 > I am Home content </ h2 > 
</ template >

<script>
    export default {
        name:'Home'
    }
</script>

## routing

1. Understand: A route is a set of mapping relationships (key-value), and multiple routes need to be managed by a router.
2. Front-end routing: the key is the path, and the value is the component.

### 1. Basic usage

1. Install vue-router, command: {{EJS0}} {{EJS1}} {{EJS2}}

2. Apply the plugin: {{EJS3}} {{EJS4}} {{EJS5}}

3. Write router configuration items:

   // Introduce VueRouter
   import VueRouter from 'vue-router'
   //Introduce Luyou component
   import About from '../components/About'
   import Home from '../components/Home'

   //Create a router instance object to manage a group of routing rules
   const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
   })

   // expose the router
   export default router

4. Implement switching (active-class can configure the highlight style)

   <router-link active-class="active" to="/about">About</router-link>


5. Specify placements
   <router-view></router-view>

### 2. A few points of attention

1. Routing components are usually stored in the {{EJS6}} {{EJS7}} {{EJS8}} folder, and general components are usually stored in the {{EJS9}} {{EJS10}} {{EJS11}} folder.
2. By switching, the "hidden" routing components are destroyed by default, and they are mounted when needed.
3. Each component has its own {{EJS12}} {{EJS13}} {{EJS14}} property, which stores its own routing information.
4. The entire application has only one router, which can be obtained through the {{EJS15}} {{EJS16}} {{EJS17}} property of the component.

3. Nested (multi-level) routing

// router/index.js 
// This file is specially used to create a router for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                }
            ]
        }
    ]
})

// pages/Home.vue
<template>
    <div>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

// pages/Message.view
<template>
    <div>
        <ul>
            <li>
                <a href="/message1">message001</a>  
            </li>
            <li>
                <a href="/message2">message002</a>  
            </li>
            <li>
                <a href="/message/3">message003</a>  
            </ 
        </>liul>
    </div>
</template>

<script>
    export default {
        name:'Message'
    }
</script>

// pages/New.vue
<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'News'
    }
</script>

### 3. Multi-level routing (multi-level routing)

1.  Configure routing rules and use the children configuration item:

   routes : [ 
    { 
        path : '/about', 
        component : About, 
    }, 
    { 
        path : '/home', 
        component : Home, 
        children : [ //Configure child routes through children 
            { 
                path : 'news', //this Do not write: /news 
                component : News 
            }, 
            { 
                path : 'message',//Do not write here: /message 
                component : Message 
            } 
        ] 
    } 
   ]


2.  Jump (to write the full path):

   <router-link to="/home/news">News</router-link>

4. The query parameter of the route

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

// pages/Detail.vue
<template>
    < ul > 
        < li > Message ID: {{$route.query.id}} </ li > 
        < li > Message Title: {{$route.query.title}} </ li > 
    </ ul > 
</ template >

<script>
    export default {
        name:'Detail',
        mounted() {
            console.log(this.$route)
        },
    }
</script>

// pages/Message.view
<template>
    < div > 
        < ul > 
            < li  v-for = "m in messageList"  :key = "m.id" > 
                <!-- Jump to the route and carry the query parameter, the string writing of to--> 
                <!-- <router-link :to="{{EJS18}}">{{m.title}}</router-link> -- >

                <!-- Jump to the route and carry the query parameter, the object writing of to--> 
                < router-link  :to = "{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>

            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    { id : '001' , title : 'Message 001' },
                    { id : '002' , title : 'Message 002' },
                    { id : '003' , title : 'Message 003' }
                ]
            }
        },
    }
</script>

5. Named Routes

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

// pages/Message.view
<template>
    < div > 
        < ul > 
            < li  v-for = "m in messageList"  :key = "m.id" > 
                <!-- Jump to the route and carry the query parameter, the object writing of to--> 
                < router-link  : to = "{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    { id : '001' , title : 'Message 001' },
                    { id : '002' , title : 'Message 002' },
                    { id : '003' , title : 'Message 003' }
                ]
            }
        },
    }
</script>

### 5. Named Routes

1. Function: It can simplify the jump of the route.

2. How to use

   1. Name the route:

      {{EJS19}}{{EJS20}}{{EJS21}}

   2. Simplify jumps:

      {{EJS22}}{{EJS23}}{{EJS24}}

6. The params parameter of the route

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',
                            component:Detail,
                        }
                    ]
                }
            ]
        }
    ]
})

// pages/Message.view
<template>
    < div > 
        < ul > 
            < li  v-for = "m in messageList"  :key = "m.id" > 
                <!-- Jump to the route and carry the params parameter, the string writing of to--> 
                <!-- <router-link :to="{{EJS25}}">{{m.title}}</router-link> -->

                <!-- Jump to the route and carry the params parameter, the object writing of to--> 
                < router-link  :to = "{
                    name:'xiangqing',
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>

            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    { id : '001' , title : 'Message 001' },
                    { id : '002' , title : 'Message 002' },
                    { id : '003' , title : 'Message 003' }
                ]
            }
        },
    }
</script>

### 6. The params parameter of the route

1. Configure the route, declare to receive the params parameter

   {
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:News
        },
        {
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title', //Use placeholder declaration to receive params parameters
                    component:Detail
                }
            ]
        }
    ]
   }


2. Pass parameters

   <!-- Jump and carry the params parameter, the string writing of to--> 
   < router-link  :to = "/home/message/detail/666/Hello" > jump </ router-link >

   <!-- Jump and carry the params parameter, the object writing of to--> 
   < router-link  
    :to = "{
        name:'xiangqing',
        params:{
           id:666,
           title: 'Hello'
        }
    }" 
   > jump </ router-link >


   > Special attention: When the route carries the params parameter, if the object writing of to is used, the path configuration item cannot be used, and the name configuration must be used!

3. Receive parameters:

   $route.params.id
   $route.params.title

7. Routing props configuration

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
export  default  new VueRouter({
     routes :[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,

                            //The first way of writing props, the value is an object, and all key-values ​​in the object will be passed to the Detail component in the form of props. 
                            // props:{a:1,b:'hello'}

                            //The second way of writing props, the value is a boolean value. If the boolean value is true, all params parameters received by the routing component will be passed to the Detail component in the form of props. 
                            // props: true

                            //The third way of writing props, the value is a function
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

// pages/Detail.vue
<template>
    < ul > 
        < li > Message ID: {{id}} </ li > 
        < li > Message Title: {{title}} </ li > 
    </ ul > 
</ template >

<script>
    export default {
        name:'Detail',
        props:['id','title'],
        computed: {
            // id(){
            //  return this.$route.query.id
            // },
            // title(){
            //  return this.$route.query.title
            // },
        },
        mounted() {
            // console.log(this.$route)
        },
    }
</script>

### 7. Route props configuration

​ Function: Make it easier for routing components to receive parameters

{
    name: 'xiangqing' ,
    path:'detail/:id',
    component:Detail,

    //The first way of writing: the props value is an object, and all key-value combinations in the object will eventually be passed to the Detail component through props 
    // props:{a:900}

    //The second way of writing: the props value is a boolean value, and the boolean value is true, then all the params parameters received by the route are passed to the Detail component through props 
    // props: true

    //The third way of writing: the props value is a function, and each set of key-values ​​in the object returned by the function will be passed to the Detail component through props
    props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }
}

8. The replace property of router-link

### 8. {{EJS26}}{{EJS27}}{{EJS28}}'s replace attribute

1. Function: control the mode of operating browser history when routing jumps
2. There are two ways to write the browser's history: {{EJS29}}{{EJS30}}{{EJS31}} and {{EJS32}}{{EJS33}}{{EJS34}}, {{EJS35}}{{EJS36}}{{EJS37}} is to append the history record, {{EJS38}}{{EJS39}}{{EJS40}} is to replace the current record. The default is {{EJS41}}{{EJS42}}{{EJS43}} when routing jumps
3. How to enable {{EJS44}} {{EJS45}} replace {{EJS46}} {{EJS47}} {{EJS48}}{{EJS49}}{{EJS50}}

9. Programmatic Routing Navigation

// pages/Message.view
<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">

                <!-- Jump to the route and carry the params parameter, the object writing of to--> 
                < router-link  :to = "{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    { id : '001' , title : 'Message 001' },
                    { id : '002' , title : 'Message 002' },
                    { id : '003' , title : 'Message 003' }
                ]
            }
        },
        methods: {
            pushShow(m){
                this.$router.push({
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                })
            },
            replaceShow(m){
                this.$router.replace({
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                })
            }
        },
    }
</script>

### 9. Programmatic routing navigation

1. Function: Realize routing jump without {{EJS51}}{{EJS52}}{{EJS53}}, making routing jump more flexible

2. Specific code:

   //The two APIs of $router 
   this .$router.push({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
   })

   this.$router.replace({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
   })
   this .$router.forward() //forward 
   this .$router.back() //back 
   this .$router.go() //can be forward or backward

10. Cache routing components

// pages/Home.vue
<template>
    <div>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class= "active"  to = "/home/message" > Message </ router-link > 
                </ li > 
            </ ul > 
            <!-- Cache multiple routing components--> 
            <!-- <keep-alive :include ="['News','Message']"> -->

            <!-- cache a routing component --> 
            < keep-alive  include = "News" > 
                < router-view > </ router-view > 
            </ keep-alive > 
        </ div > 
    </ div > 
</ template >

<script>
    export default {
        name:'Home',
        /* beforeDestroy() {
            console.log('Home component is about to be destroyed')
        }, */
        /* mounted() {
            console.log('Home component is mounted', this)
            window.homeRoute = this.$route
            window.homeRouter = this.$router
        },  */
    }
</script>

### 10. Cache routing components

1. Function: Keep the routing components that are not displayed mounted and not destroyed.

2. Specific code:

   <keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>

11. Two new lifecycle hooks

// pages/New.vue
<template>
    <ul>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data() {
            return {
                opacity:1
            }
        },
        /* beforeDestroy() {
            console.log('News component is about to be destroyed')
            clearInterval(this.timer)
        }, */
        /* mounted(){
            this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        }, */
        activated() {
            console .log( 'News component is activated' )
             this .timer = setInterval( () => {
                 console .log( '@' )
                 this .opacity -= 0.01 
                if ( this .opacity <= 0 ) this .opacity = 1 
            }, 16 )
        },
        deactivated() {
            console .log( 'News component is deactivated' )
            clearInterval(this.timer)
        },
    }
</script>

### 11. Two new lifecycle hooks

1. Function: Two hooks unique to the routing component, used to capture the activation state of the routing component.
2. Specific names:
    1. {{EJS54}} {{EJS55}} {{EJS56}} Fired when the routing component is activated
    . 2. {{EJS57}} {{EJS58}} {{EJS59}} Triggered when the routing component is deactivated .

12. Routing guards – global guards

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
const router =   new VueRouter({
     routes :[
        {
            name:'guanyu',
            path:'/about',
            component:About,
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,

                            //The first way of writing props, the value is an object, and all key-values ​​in the object will be passed to the Detail component in the form of props. 
                            // props:{a:1,b:'hello'}

                            //The second way of writing props, the value is a boolean value. If the boolean value is true, all params parameters received by the routing component will be passed to the Detail component in the form of props. 
                            // props: true

                            //The third way of writing props, the value is a function
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//Global pre-routing guard——Called during initialization and called before each route switch 
router.beforeEach( ( to, from ,next )=> {
     console .log( 'pre-routing guard' ,to , from )
     if (to.meta.isAuth){ //Determine whether authentication is required 
        if (localStorage.getItem( 'school' )=== 'lemon' ){
            next()
        }else{
            alert( 'The school name is wrong, no permission to view!' )
        }
    }else{
        next()
    }
})

//Global post-routing guard——Called during initialization and called after each route switch 
router.afterEach( ( to, from )=> {
     console .log( 'Post-routing guard' ,to, from )
     document .title = to.meta.title || 'Little Cap System'
})

export default router

### 12. Routing guard

1. Function: Permission control for routing

2. Classification: global guards, exclusive guards, in-component guards

3. Global Guard:

   //Global pre-guard: executed at initialization, executed before each route switch 
   router.beforeEach((to, from ,next)=>{
    console.log( 'beforeEach' ,to, from )
     if (to.meta.isAuth){ //Determine whether the current route needs permission control 
        if (localStorage.getItem( 'school' ) === 'atguigu' ){ / /Specific rules for permission control 
            next() //Release 
        } else {
            alert( 'No permission to view' )
             // next({name:'guanyu'})
        }
    }else{
        next() // release
    }
   })

   //Global post-guard: executed at initialization, executed after each route switch 
   router.afterEach((to, from )=>{
    console.log('afterEach',to,from)
    if(to.meta.title){ 
        document.title = to.meta.title //modify the title of the web page 
    } else {
        document.title = 'vue_test'
    }
   })

13. Routing Guard – Exclusive Routing Guard

// router/index.js 
// This file is specially used to create routers for the entire application 
import VueRouter from  'vue-router' 
//Introduce components 
import About from  '../pages/About' 
import Home from  '../pages /Home' 
import News from  '../pages/News' 
import Message from  '../pages/Message' 
import Detail from  '../pages/Detail'

//Create and expose a router 
const router =   new VueRouter({
     routes :[
        {
            name:'guanyu',
            path:'/about',
            component:About,
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            children:[
                {
                    name : 'xinwen' ,
                     path : 'news' ,
                     component :News,
                     meta :{ isAuth : true , title : 'news' },
                     beforeEnter : ( to, from , next ) => {
                         console .log( 'Exclusive route Guard' ,to, from )
                         if (to.meta.isAuth){ //Determine whether authentication is required 
                            if (localStorage.getItem( 'school' )=== 'lemon' ){
                                next()
                            }else{
                                alert( 'The school name is wrong, no permission to view!' )
                            }
                        }else{
                            next()
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,

                            //The first way of writing props, the value is an object, and all key-values ​​in the object will be passed to the Detail component in the form of props. 
                            // props:{a:1,b:'hello'}

                            //The second way of writing props, the value is a boolean value. If the boolean value is true, all params parameters received by the routing component will be passed to the Detail component in the form of props. 
                            // props: true

                            //The third way of writing props, the value is a function
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//Global post-routing guard——Called during initialization and called after each route switch 
router.afterEach( ( to, from )=> {
     console .log( 'Post-routing guard' ,to, from )
     document .title = to.meta.title || 'Little Cap System'
})

export default router

4. Exclusive guard:

   beforeEnter(to, from ,next){
     console .log( 'beforeEnter' ,to, from )
     if (to.meta.isAuth){ //Determine whether the current route needs permission control 
        if (localStorage.getItem( 'school' ) === 'atguigu' ){
            next()
        }else{
            alert( 'No permission to view' )
             // next({name:'guanyu'})
        }
    }else{
        next()
    }
   }

14. Routing guards – routing guards within components

< template > 
    < h2 > I am About Content </ h2 > 
</ template >

<script>
    export default {
        name:'About',
        mounted() {
        },

        //Through routing rules, it is called when entering the component 
        beforeRouteEnter (to, from , next) {
             console .log( 'About--beforeRouteEnter' ,to, from )
             if (to.meta.isAuth){ //Determine whether it is necessary Authentication 
                if (localStorage.getItem( 'school' )=== 'lemon' ){
                    next()
                }else{
                    alert( 'The school name is wrong, no permission to view!' )
                }
            }else{
                next()
            }
        },


        //Through routing rules, beforeRouteLeave (to, from , next)
             is called when leaving the component { console .log( 'About--beforeRouteLeave' ,to, from )
            next()
        }
    }
</script>

5. Guard in the component:


   //Enter the guard: through the routing rules, beforeRouteEnter (to, from , next) is called when entering the component
   },
   //Leave the guard: through the routing rules, the component is called 
   beforeRouteLeave (to, from , next) {
   }

15. history mode and hash mode

### 13. Two working modes of the router 

 - for a url, what is the hash value? —— # and the content after it is the hash value.
- The hash value will not be included in the HTTP request, ie: the hash value will not be brought to the server.
- Hash mode:
 - There is always a # in the address, which is not beautiful.
- If the address is shared through a third-party mobile app in the future, if the app verification is strict, the address will be marked as illegal.
- Compatibility is better.
- history mode:
 - The address is clean and beautiful.
- Compatibility is slightly worse than hash mode.
-Backend staff support is required when the application is deployed and launched, to solve the problem of 404 on the server side of refreshing the page.

Seven, Vue UI component library

1. element-ui

# install 
npm i element-ui

  • Introduce on demand

// main.js 
//Introduce Vue 
import Vue from  'vue' 
//Introduce App 
import App from  './App.vue'

//Complete import 
//Introduce ElementUI component library 
// import ElementUI from 'element-ui'; 
//Introduce all styles of ElementUI 
// import 'element-ui/lib/theme-chalk/index.css';

//import as needed 
import { Button,Row,DatePicker } from  'element-ui' ;

//Turn off Vue's production tip 
Vue.config.productionTip = false

// useElementUI 
// Vue.use(ElementUI);
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker);

//Create vm 
new Vue({
     el : '#app' ,
     render : h => h(App),
})

2. Common UI component library on mobile terminal

  • Vant https://youzan.github.io/vant
  • Cube UI https://didi.github.io/cube-ui
  • Mint UI http://mint-ui.github.io

3. Common UI component library on PC

  • Element UI https://element.eleme.cn
  • IView UI https://www.iviewui.com

You may also like...

Leave a Reply

Your email address will not be published.