Vue3 Learning — VuE-Router (2)

The router – v – slot of the link

This is the 26th day of my participation in the August Text Challenge.More challenges in August

The router – v – slot of the link

Router-link, by default, renders elements as A tags if we need to render other elements

In vue-Router3. x, router-link has a tag attribute that determines what element router-Link is rendered to

However, starting with Vue-Router4.x, this attribute was removed, giving us a more flexible V-slot way to customize the rendered content

The basic use

<router-link to="/about">
  <! -- Router-link slots can store elements -->
  <button>about</button>
</router-link>
Copy the code

<router-link to="/about">
  <! -- Router-link slots can store components -->
  <Foo />
</router-link>
Copy the code

<router-link to="/about">
  <! -- Router-link slots can store multiple elements and components
  <button>about</button>
  <button>foo</button>
  <Foo />
</router-link>
Copy the code

custom

By default, vue-Router simply wraps an A tag around all of our elements and uses the A tag to redirect the route

<router-link to="/about">
  <h2>about</h2>
</router-link>
Copy the code

It will actually render as:

attribute

Vue-router provides a series of attributes for vue-router slots in the way of scope slots, which are used to extend functions of vue-router

href

<router-link to="/about" v-slot="props">
  <! -- href = /about -->
  <h2>{{ props.href }}</h2>
</router-link>
Copy the code

route

<router-link to="/about" v-slot="props">
  <! -- Route is our route object is our route object standardized (extended) object -->
  <h2>{{ props.route }}</h2>
</router-link>
Copy the code

IsActive and isExactActive

<router-link to="/about" v-slot="props">
  <! -- If the current route matches the router, isActive will be true. -->
  <h2>{{ props.isActive }}</h2>

  <! -- isExactActive is set to true if the current route matches the router-link-exact-active route.
  <h2>{{ props.isExactActive }}</h2>
</router-link>
Copy the code

Navigate function

By default, vue-Router does this by wrapping an A tag around our element

Sometimes, however, we do not want vue-Router to wrap the A tag for us, so we can use the custom attribute instead

<router-link to="/about" custom>
  <h2>about</h2>
</router-link>

<! -- will eventually be rendered as -->
<h2>about</h2>
Copy the code

But in this way, the function of route jump is lost, because at this time it is a custom mode, the route jump needs to be specified by ourselves

The navigate function is then used

<router-link to="/about" v-slot="{ navigate }" custom>
  <! The -- navigate function, which is essentially a syntax sugar function to help navigate the current route with the $router.push method when we click -->
  <h2 @click="navigate">about</h2>
</router-link>
Copy the code

The router – view of v – slot

Router-view also provides us with a slot

• Component: Component to render
• Route: a standardized route object parsed

Component

<router-view v-slot="props">
  <! Props.component is where the components are actually placed -->
  <component :is="props.Component" />
</router-view>
Copy the code

Case study - Dynamic effects between component switches

<template>
  <div>
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>

    <router-view v-slot="props">
      <transition name="fade" mode="out-in">
        <component :is="props.Component" />
      </transition>
    </router-view>
  </div>
</template>

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

<style scoped>
.fade-enter-from..fade-leave-to {
  opacity: 0;
}

.fade-enter-active..fade-leave-active {
  transition: opacity 1s ease;
}
</style>
Copy the code

Case 2-- Caching when components are switched

<router-view v-slot="props">
  <keep-alive>
    <component :is="props.Component" />
  </keep-alive>
</router-view>
Copy the code

Dynamically Modifying a Route

Dynamically Adding routes

In some cases we may need to add routes dynamically

• Routes can be identified by name
• One method we can use at this point is addRoute

Adding a Level-1 Route

// Add a route on the router
router.addRoute({
  path: '/category'.component: () = > import('.. /src/pages/Category.vue'),
  children: [...]. })Copy the code

Adding a Secondary Route

router.js

  {
    path: '/category'.name: 'category'.component: () = > import('.. /pages/Category.vue')}Copy the code

Parameter 1: the name of the route, that is, the name attribute configured in the route object
// Parameter 2: route object
router.addRoute('category', {
  path: 'fruit'.component: () = > import('.. /src/pages/Fruit.vue'),
  children: [...]. })Copy the code

Dynamically Deleting routes

Method 1: Replace the old route with a new route

router.addRoute({
  path: '/category'.name: 'category'.component: () = > import('.. /src/pages/Category.vue')})// If the names are the same, vue-Router will treat them as a route
router.addRoute({
  path: '/fruit'.name: 'category'.component: () = > import('.. /src/pages/Fruit.vue')})Copy the code

Method 2 - removeRoute

// The argument is the value of the name attribute of the routing object
router.removeRoute('category')
Copy the code

Method 3 - The function returned by using the addRoute method

const removeRoute = router.addRoute({
  path: '/category'.name: 'category'.component: () = > import('.. /src/pages/Category.vue')
})

removeRoute()
Copy the code

Other methods

hasRoute

// Takes the name attribute of the route object
// If no argument is passed, the default return value is false
console.log(router.hasRoute('category'))
Copy the code

getRoutes

// Get all routing objects - the nested routes will be flattened
// For example, there is route '/config' and subroute '/config/info'
/ / this time get results for [{path: '/ config,...}, {path:'/config/info,...}]
console.log(router.getRoutes())
Copy the code

Route navigation guard

Vue-router provides some life cycle callback functions in the process of route jump, which allows us to perform required operations in each link of route jump. The specific life cycle hooks can be found on the official website

For example, we can determine whether the user is logged in before entering the page, and if not, we can jump to the login page directly using beforeEach hook function. This process is called routing navigation guard

router.beforeEach((to, from) = > {
  console.log('Route jumped') // Any route jump triggers a jump
  console.log('to', to) // Incoming Route Route object
  console.log('from'.from) // Outgoing Route Route object
})
Copy the code

BeforeEach functions can have the following return values