<router-link>

The

component enables users to (click) navigate in applications with routing capabilities. The to attribute specifies the destination address, which is rendered as a
tag with the correct link by default. You can configure the tag attribute to generate additional tags. In addition, when the destination route is successfully activated, the link element automatically sets a CSS class name to indicate that the route is activated

<router-link>Props

to

  • typestring | Location
  • required

Represents a link to the destination route. When clicked, the internal value of to is immediately passed to router.push(), so this value can be a string or an object describing the destination location.

<! -- string --> <router-link to="home">Home</router-link> <! --> <a href="home">Home</a> <! --> <router-link v-bind:to="home">Home</router-link> <! --> <router-link v-bind:to="{path: 'home'}">Home</router-link> <! /user/123--> <router-link :to="{name: 'user',params: {userId: 123}}"<! /user? plan=123--> <router-link :to="{path: 'user', query: {plan: '123'}}">demo</router-link>
Copy the code

replace

  • Type:boolean
  • Default value:false

With the replace attribute, when clicked, router.replace() is called instead of router.push(), so no history is left after navigation.

<router-link :to="{ path: '/abc'}" replace></router-link>
Copy the code

append

  • Type:string
  • Default value:false

After the AppEnd property is set, the base path is added before the current (relative) path. For example, if we navigate from /a to a relative path B, the path is /b if append is not configured, and /a/b if configured

<router-link :to="{ path: 'relative/path'}" append></router-link>
Copy the code

tag

  • Type:string
  • Default value:"a"

Sometimes you want

to be rendered as some kind of tag, such as

  • . So we use the Tag Prop class to specify which tag, which again listens for clicks and triggers navigation.

    • <router-link to="/foo" tag="li">foo</router-link> <! Render result --> <li>foo</li>Copy the code

    active-class

    • Type:string
    • Default value:router-link-active

    Sets the name of the CSS class to use when the link is activated. The default value can be configured globally with the route construction option linkActiveClass

    <router-view>

    The

    component is a functional component that renders the view component to which the path matches. A

    rendered component can also embed its own

    , depending on the nested path, rendering nested components.


    Other attributes (those not used by the router-View) are passed directly to the rendered component, and in many cases the data for each route is contained within the route parameters.

    Because it is also a component, it can be used with
    and

    . If both are used together, make sure to use

    on the inner layer.


    <transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>
Copy the code

    <router-view> Props

    name

    • Type:string
    • Default value:default

    If

    has a name, the corresponding component under Components in the corresponding routing configuration is rendered.

    Router Build options

    routes

    • Type:Array<RouteConfig>

    RouteConfig type definition:

    declare typeRouteConfig = { path: string; / / path component? : Component; name? : string; // Name the route components? : { [name: string]: Component }; // Name view component Redirect? : string | Location | Function; // Redirect props? : boolean | Object | Function;alias? : string | Array<string>; / / alias children? : Array<RouteConfig>; // Nested routines are beforeEnter? : (to: Route, from: Route, next: Function) => void; meta? : any; // Use the routing meta information$routeThe.meta. Attribute can be obtained // 2.6.0+caseSensitive? : boolean; // Is the matching rule case-sensitive? (Default:false) pathToRegexpOptions? : Object; // Compile the re option}Copy the code

    mode

    • Type:string
    • Default value:hashThe browser environment |abstractNode. Js environment
    • Optional value:"hash" | "history" | "abstract"

    Configure the routing mode:

    • hash: Uses the URL hash value for routing. Support for all browsers, including those that don’t support the HTML5 History Api.
    • history: Relies on the HTML5 History API and server configuration. Check out the HTML5 History mode.
    • abstract: Supports all JavaScript runtime environments, such as node.js server. If the browser API is not found, routing automatically forces the mode into this mode

    Route Object Properties

    $router.path

    • Type:string

    String, corresponding to the path of the current route, always resolved to an absolute path, such as “/foo/bar”

    $router.params

    • Type:Object

    A key/value object that contains dynamic fragments and fully matched fragments and is empty if there are no routing parameters.

    $router.query

    • Type:Object

    A key/value object representing a URL query parameter. For example, for path /foo? $route.query.user == 1; $route.query.user == 1;

    $route.hash

    • Type:string

    Hash value (with #) of the current route, or empty string if no hash value exists.

    $route.fullPath

    • Type:string

    The parsed URL contains the query parameters and the full path to the hash.

    $route.matched

    • Type:Array<RouteRecord>

    An array containing routing records for all nested path fragments of the current route. The routing record is a copy of the objects in the Routes configuration array (and in the Children array).

    Const router = new VueRouter({routes: [//) const router = new VueRouter({routes: [//)'/foo', Component: Foo, children: [// This is also a route record {path:'bar', component: Bar }
      ]
    }
  ]
})
Copy the code