1.1 Route Parameter Transmission

1.1.1 query

xxx.vue

<button @click="showAbout">About</button> ----------------------------------------------------------- methods:{ ShowAbout () {this.$router.push({path: 'about', query:{id:1 // pass arguments through query}})}}Copy the code

about.vue

console.log(this.$route.query.id); // Get the parameter passed by $routeCopy the code

1.2.1 params

xxx.vue

<button @click="showAbout">About</button> ----------------------------------------------------------- methods:{ showAbout () { this.$router.push({ //path: Name :'about' params:{id:2 // Params :{id:2}})}}Copy the code

router/index.js

{path: "/about", name:'about',// identify component with name: about},Copy the code

about.vue

console.log(this.$route.params.id)
Copy the code

1.2.1 props

xxx.vue

this.$router.push({
    path: `about`,
    query:{
        id:1
    }
})
------------------------
this.$router.push({
    path: `about`,
    params:{
        name:'foo'
    }
})
Copy the code

router/index.js

{path: "/about", Component: about, props(route) {// To function, query, params can return {id: route.query.id, id: route.params.name, }; }},Copy the code

about.vue

// On the page, receive props:['id','name'] //1,fooCopy the code

2.1 meta

Definition: Route metadata, used to define the information carried on the route.

router/index.js

{
      path: "/about",
      component: About,
      meta:{
          isLogin:true,
          title:'hello'
      }
},
Copy the code

2.1.1 Application Scenarios

Log on to check

router.beforeEach((to, from ,next) => { console.log(to.meta.isLogin); // Check whether the login page is console.log(to.meta.title); // find title})Copy the code

3.1 Cache Routing Components

3.1.1 role

Keep undisplayed routing components mounted and not destroyed.

<keep-alive include="About"> //include is not destroyed component, News is component name <router-view></router-view> </keep-alive>Copy the code

xxx.vue

Export default {props:['id'], name:'About',//include component name refers to this}Copy the code

4.1 Unique lifecycle of routing components

Activated and deactivated are activated and deactivated hooks, respectively. Note that their components must be included in the keep-alive tag otherwise they will not work.

xxx.vue

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

about.vue

Activated () {console.log(' activate '); }, deactivated () {console.log(' deactivated '); }Copy the code

5.1 Route Guard

5.1.1 Global Route Guard (also called Navigation)

router/index.js

BeforeEach ((to,from,next)=>{to // which route to enter from // which route to leave next // Perform (release)}) // Global post guard: Router.aftereach ((to,from)=>{to // Which route to enter from // which route to leave})Copy the code

5.1.2 Exclusive Guard

router/index.js

// Write directly to where routes are configured {name:'about', path:'/about', Component: about, beforeEnter: (to, from, next) => {}},Copy the code

5.1.3 Internal guard of components

Xxx.vue // write to a component

BeforeRouteEnter (to, from, next) {}, // Leave guard: BeforeRouteLeave (to, from, next) {} is called when leaving the component by routing rules.Copy the code

Feel free to like and comment if you find it helpful. The views expressed above are personal. Please correct any errors. If you are interested in the front, welcome to my personal blog sundestiny. Making. IO/myblog /