Route (II)

One . Routing jump replace Method

1. effect ： Controls the mode of operating browser history when routing jumps

Browser history can be written in two ways ：push and replace, among push Is to add history ,replace Is to replace the current record . The default value for route jump is push The way

2. Turn on replace Pattern ：

<router-link replace ...>News</router-link>

Two . Programming route navigation

1. effect ： Don't use <router-link> Implement route jump , Make routing jump more flexible

2. Specific code

   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 off 
   this.$router.go() // You can move forward or backward 
   

3、 ... and . Cache routing components

1. effect ： Keep the routing components not shown mounted , Not destroyed

// Cache a routing component 
<keep-alive include="News"> //include Write the name of the component you want to cache , Not writing means all caches 
    <router-view></router-view>
</keep-alive>

// Cache multiple routing components 
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

Four . Two life cycle hooks

1. activated and deactivated Are two hooks unique to the routing component , Used to capture the activation status of routing components
2. Specific use ：
   1. activated Triggered when the routing component is activated
   2. deactivated Triggered when the routing component is deactivated

 activated(){
            console.log('News The component is activated ')
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        deactivated(){
            console.log('News The component is deactivated ')
            clearInterval(this.timer)
        }

5、 ... and . Route guard

5.1 Global guard

// Global front route guard ———— When initializing 、 Called before each route switch 
router.beforeEach((to,from,next) => {
    console.log(' Front routing guard ',to,from)
    if(to.meta.isAuth){
        if(localStorage.getItem('school')==='atguigu'){
            next()
        }else{
            alert(' The school name is wrong , No permission to view ！')
        }
    }else{
        next()
    }
})

// Global post route guard ———— It is called during initialization 、 Called after each route switch 
router.afterEach((to,from)=>{
	console.log(' Post routing guard ',to,from)
	document.title = to.meta.title || ' Silicon Valley system '
})

5.2 Exclusive routing guard

{
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:' Home page '},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{title:' Journalism '},
                    // Exclusive guard , Called after a specific route switch 
                    beforeEnter(to,from,next){
                        console.log(' Exclusive routing guard ',to,from)
                        if(localStorage.getItem('school') === 'atguigu'){
                            next()
                        }else{
                            alert(' No permission to view ')
                        }
                    }
                }

5.3 Routing guard inside the component

src/pages/About.vue:

<template>
    <h2> I am a About Content of the component </h2>
</template>

<script>
    export default {
        name:'About',
        // Through routing rules , Called when leaving the component 
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(localStorage.getItem('school')==='atguigu'){
                next()
            }else{
                alert(' The school name is wrong , No permission to view ！')
            }
        },
        // Through routing rules , Called when leaving the component 
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }
    }
</script>

6、 ... and 、 Two working modes of router

For one url Come on , What is? hash value ？—— # And what follows is hash value

hash Values will not be included in HTTP In request , namely ：hash The value will not be brought to the server

hash Pattern ：

The address always carries # Number , Not beautiful
If you send the address through a third-party mobile phone in the future app Share , if app The verification is strict , The address will be marked as illegal
Good compatibility
history Pattern ：

The address is clean , beautiful
Compatibility and hash Slightly worse than the model
Back end personnel support is required when the application is deployed online , Solve the problem of refreshing the page server 404 The problem of

connect-history-api-fallback

nginx