Vue router routing Basics

Vue router maps components (components) to routes and tells vue router where to render them

1. Use

<Router-link to = './'> specifies the route address, which is rendered as a signature.

<Router-View> the routing matching component is displayed here. You can use the DIV package definition style to add other content.

2. Configure routes

1. Define route Configuration

2. Create a router instance

Const router = new vuerouter ({

Routes: routes })

3. Globally mount the route, which is used in APP. vue.

 

3,

1. This. $ router:

Indicates a global router object. After a route is injected using the router route parameters in the project, you can obtain the router object on any page using this method and call its push (), go () and other methods;

2. This. $ route:

Indicates the vro object currently used for redirect. You can call its name, path, query, Params, and other methods;

 To use routing, first write the path component name in the router and JS file. You need to nest the routing and dynamic routing. Then write <router-link to = '/'> sub-component display entry <router-link/> in the parent component, next, write <router-View> </router-View> below to display the child components, so that the rotor components can be jumped when the parent component is displayed, note that you do not need to write router-related configurations in the child components.

4. layer-2 routing and nested routing. In router. JS, the children array is used as the attribute. The path component is added below.

Dynamic Routing:

1. Write the components to be dynamically displayed in Router. js in this way,

2. Enter the container parent component to dynamically display the component and write it like this

Name matches the component name in Router. js. Params is the value passed to the dynamic component.

3. Enter the dynamic component. At this time, the value sent from the parent component is accepted and obtained using this. $ route. Params. Id.

 

 

4. Use this. $ router. Push/replace/go to perform programmatic operations on the route. You need to define methods and call them.

'

 

Vue router routing Basics