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

In this article we will look at the routes type: RouteRecordRaw and its attribute configuration. We need to know how to use them.

RouteRecordRaw

When the user adds a route using routes Option or router.addroutes (), the route record can be obtained.

There are three types of routing record: single view record, multi-view record and redirection record. So what parameters must be included in routing record and how to configure them? Let’s continue to look at.

path

Record path. It should begin with a /, unless the record is a child of another record. The following parameters can be defined: /home/:user Matches /home/slifree and /home/yexiao. As follows:

const routes = [
    { path: '/home/:user'.component:() = > import('.. /views/Home.vue')},]Copy the code

Fixed or dynamic routes can be given.

redirect

The redirect occurs before all navigational guards and triggers a new navigation with a new target location. It can also be a function that receives the destination routing address and returns the location we should redirect to.

If router-link is in, use this:

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

Routes are configured like this:

const routes = [
    { path: '/home'.component:() = > import('.. /views/Home.vue')},]Copy the code

The result of jumping to this route is:

http://localhost:3000/#/home? Name = also smiled
Copy the code

But if we define redirection, as follows:

const routes = [
    { path: '/home'.redirect:"/about".component:() = > import('.. /views/Home.vue')},]Copy the code

Here’s another result:

http://localhost:3000/#/about? Name = also smiled
Copy the code

Click on the route ‘/home’ and the route ‘/about’ is displayed with its corresponding content. That’s what the redirect does.

children

The nesting pattern of the current record. The content is the same as that of the parent.

alias

Alias of the route. Allows defining additional routes that resemble copies of records, using the following:

{ path: '/home'.alias: "/h".component: () = > import('.. /views/Home.vue')},Copy the code

The result of accessing ‘/home’ and ‘/h’ is the same. It is worth noting that:

All alias and path values must share the same parameters. For example, if we are dynamically routing /home/:user, alias corresponds to /h/:user.

name

Unique name of the routing record. Use as follows:

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

beforeEnter

Before entering a guard specific to this record. Notice if the record has a redirection attribute, beforeEnter is invalid, use the following:

{
    path: '/home'.component: () = > import('.. /views/Home.vue'), beforeEnter() {
        console.log("Laughing"); }}Copy the code

props

Allows parameters to be passed as props to components rendered by router-view. When passed to a multi-view record, it should be either an object with the same key as the component, or a Boolean value applied to each component, as follows:

routing

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

Home components

<template>{{props. User}} home</template>

<script setup>
const props=defineProps({
    user:String
})
</script>
Copy the code

Render result: also funny home, where we use the parameters of dynamic routing as props.

meta

To attach custom data to the record, we want to mount some other parameters so that we can do some other operations when we pass the route, we can write the other parameters in this field.

conclusion

  1. Remember that all aliases and path values must share the same arguments, and aliases are not often used.

  2. It’s worth noting that if you want to use functional components, make sure to add a displayName to the component, using the following:

const HomeView = () = > h('div'.'HomePage')
// With TypeScript, components need to be of FunctionalComponent type
HomeView.displayName = 'HomeView'
const routes = [{ path: '/'.component: HomeView }]
Copy the code

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