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

In this article we will cover the left and right protection of routing :router-link and router-View. We need to know how to use them. They are components in nature, but with special functionality, we can also use H to implement these two components, if you are interested, you can refer to the review of Vue3 API (1) and review Vue3 API (5).

The custodian of the left the router – the link

A custom component, router-link, is used to create links, change urls without reloading the page, handle URL generation, and encoding. It can be interpreted as a component that sends routing information. So what properties does it have? Let’s take a look.

to

A link representing the destination route that, when clicked, internally passes the value of to to router.push().

Fixed routing

Suppose one of our routes is:

{ path: '/home'.name:'home'.component:() = > import('.. /views/Home.vue')
Copy the code

So we can use it like this:

  1. throughpathHop routing
<router-link :to="'/home'">Home</router-link>
或
<router-link :to="{ path: '/home' }">Home</router-link>
Copy the code
  1. Because this isAfter routingSo we can also passnameHop routing
<router-link :to="{ name: 'home'}">Home</router-link>
Copy the code

Dynamic routing

In this case, what if it is a dynamic route with parameters, as follows:

{ path: '/home/:user'.name:'home'.component:() = > import('.. /views/Home.vue')
Copy the code

The dynamic section starts with a colon:. If we want to display the corresponding content based on this parameter, we can use:

<router-link :to="{ path: '/home', params: { user: 'slifree' }}">Home</router-link>
Copy the code

We can also add query parameters as follows:

<router-link :to="{path: '/ home', params: {user: 'slifree'}, query: {name: 'also smiled'}}">Home</router-link>
Copy the code

We can get the values of params and query as follows:

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params); //{user: "slifree"}
console.log(route.query); //{name: "also laugh "}
</script>
Copy the code

It is worth noting that access to the route useRouter or useRoute functions can only be called in the setup function.

replace

With the replace property, router.replace() is called when clicked, not router.push(), so no history is left after navigation. Use the following:

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

This property can be used when we do not want to keep a navigation history.

active-class

The class of applied to the render when the link is activated.

Default: “router-link-active” (or global linkActiveClass). When we link active, render as follows:

<a href="#/about" class="router-link-active router-link-exact-active" aria-current="page">about</a>
Copy the code

We can use this property when we need to change the class. For clarity, we define a Chinese class name (Chinese class names are not recommended) and render the following:

<a href="#/about" class="Also smiled the router - link - the exact - active" aria-current="page">about</a>
Copy the code

aria-current-value

When the link to activate, passed to attribute aria – the value of the current optional ‘page’ | ‘step’ | ‘location’ | ‘date’ | ‘time’ | ‘true’ | ‘false’ (string), default is: ‘page’.

The above rendering results already include this attribute, aria is the information describing the tag in the case of visualization, it is an aid tool for those who need help, there is no special case, we use the default value.

custom

Whether a

should wrap its contents in a
element. This is useful when creating custom RouterLinks using V-slot. The default is inside the package, if this attribute is added, as follows:

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

Render the result as follows:

about
Copy the code

There is no element wrapped around about.

exact-active-class

Links are precisely activated when applied to render the class. Analogies the use of active-class.

The router – v – slot of the link


exposes the underlying customization capabilities through a scope slot, using the following:

<router-link
    to="/about"
    custom
    v-slot="{ href, route, navigate, isActive, isExactActive }"
  >
    <div>about</div>
 </router-link>
Copy the code

We usually use V-slot when working with other components, but be careful to pass the custom configuration to

to prevent it from wrapping content inside
elements.

The router – to protect the right view

Router-view will display the component corresponding to the URL, and we can put it anywhere to fit the layout we want. It can be thought of as a component that accepts routing information and presents a view. So what properties does it have? Let’s take a look.

name

If

is set to name, the corresponding components under Components in the corresponding routing configuration are rendered.

Assume our route configuration is as follows:

{ path: '/'.name:'hello'.components: {default:() = > import('.. /components/HelloWorld.vue'),
    home:() = > import('.. /views/Home.vue')}}Copy the code

Use as follows:

<h2>
    <router-view></router-view>
</h2>
<h1>
    <router-view name="home"></router-view>
</h1>
Copy the code

By default, HelloWorld is rendered in H2 and Home is rendered in H1.

route

All components of a routing address have been resolved (if all components are lazily loaded) and therefore can be displayed. This is a property that we don’t use very often.

The router – view of v – slot


exposes a V-slot API that uses
and

components to wrap your routing components, as follows:

 

<router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <keep-alive>
            <component
              :is="Component"
              :key="route.meta.usePathKey ? route.path : undefined"
            />
        </keep-alive>
    </transition>
</router-view>
Copy the code

conclusion

  1. Use router-link to and router-view name.

  2. Learn how to get routing information in SETUP.

For more articles, the portal has opened: Look back at the Vue3 catalogue!