Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use Vue-Router". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use Vue-Router" can help you solve the problem.

When using Vue.js to do a project, a page is made up of multiple components, so when jumping to the page, it is not suitable to use the traditional href, so vue-router arises at the historic moment.

Routing, in fact, means pointing. When I click the home button on the page, the content of home will be displayed on the page. If I click the about button on the page, the content of about will be displayed on the page. Home button = > home content, about button = > about content, can also be said to be a kind of mapping. So there are two parts on the page, one is the click part, and the other is the part that displays the content after clicking.

After clicking, how to make the correct correspondence, for example, when I click the home button, how can the content of home be displayed on the page? This requires configuring routing in the js file.

The simplest use of Vue-Router

1. Register the route first

two。 Register routes with the VM component

3. Define component

4. Page definition jump path

Login Registration var login= {template:' Login component'} var register= {template:' Registration component'} var routerObj = new VueRouter ({routes: [/ / component here can only use component objects Cannot use the name of registered template {path: "/ login", component:login}, {path: "/ register", component:register}]}) var vm = new Vue ({el:'#app', data: {}, methods: {}, router:routerObj// registers the routing rule object to the VM instance})

Use Router-Link instead of a tag

The main purpose of this is to remove the "#" from the a tag to match the hash address, as follows

Login Registration var login= {template:' Login component'} var register= {template:' Registration component'} var routerObj = new VueRouter ({routes: [/ / component here can only use component objects Cannot use the name of registered template {path: "/ login", component:login}, {path: "/ register", component:register}]}) var vm = new Vue ({el:'#app', data: {}, methods: {}, router:routerObj// registers the routing rule object to the VM instance})

At the same time, we can also use the tag tag to render the router-link element, router-link is rendered as a link element by default, and other elements can be rendered using the tag tag, which is rendered as the span element in the above code. No matter what element it is rendered into, it still has the same click event as the a connection.

Redirect technology and default path

Default path

We can use the default path to specify the root path, just add the default path to the way the route is defined above

Var routerObj = new VueRouter ({routes: [/ / the component here can only use component objects, but not the name of the registered template {path: "/", component:login}, {path: "/ login", component:login}, {path: "/ register", component:register}]})

Specify the default path by redirection

Using the same one-line code, you can directly redirect to the login path, which is more obvious in the url display than the default path above.

Var routerObj = new VueRouter ({routes: [/ / the component here can only use component objects, but not the name of the registered template {path: "/", redirect: "/ login"}, {path: "/ login", component:login}, {path: "/ register", component:register}]})

Highlight setting after route selection

Set to highlight using the default class

Vue has a built-in class router-link-active for router-link that is highlighted after a link is clicked, which can be set in your own style.

.router-link-active {color: red; font-weight: 800; font-style: italic; font-size: 30px;}

Use a custom class name

When we want to use a selected style defined by a third party, or we want to define a more concise style, we can use linkActiveClass to define it, that is, we specify the class name when the route is initialized, and customize the style when we specify the style.

Var routerObj = new VueRouter ({routes: [/ / the component here can only use component objects, but not the name of the registered template {path: "/", redirect: "/ login"}, {path: "/ login", component:login}, {path: "/ register", component:register}], linkActiveClass:'myactive'})

Specify a styl

.router-link-active,.myactive {color: red; font-weight: 800; font-style: italic; font-size: 30px;}

Routing parameters

Pass parameters in query mode

First of all, let's set the routing link to be the specified parameter.

Log in

And multiple parameters can be specified and obtained, mainly by using the created method inside the redefined component object.

Var login= {template:' login component-{{$route.query.id}}-{{$route.query.name}}', created () {console.log (this.$route.query.id)}}

Pass parameters in params mode

First of all, we use: define the params parameter when defining the route.

Var routerObj = new VueRouter ({routes: [/ / the component here can only use component objects, but not the name of the registered template {path: "/ login/:id/:name", component:login}, {path: "/ register", component:register}],})

How to transfer in the process of actual use

Login and registration

Use in components

Var login= {template:' login component-{{$route.params.id}}', created () {console.log (this.$route.params.id)}}

Implementation of routing nesting

Account this is the template object of the Account component login registration / / component var account = {template:'# tmpl'} var login = {template: 'login'} var register = {template: 'registration'} var router = new VueRouter ({routes: [{path:'/ account', component: account, / / use the children attribute to implement child routing and at the same time Do not take / in front of the path of the child route, otherwise the request will always start with the root path. It is not convenient for us users to understand the URL address children: [{path: 'login', component: login}, {path:' register', component: register}]}]}) / / create a Vue instance Get ViewModel var vm = new Vue ({el:'# app', data: {}, methods: {}, router})

It is mainly implemented by the children attribute, and there are three error-prone points in the above code

1. Child routes do not have'/ 'when defining routes

two。 Define the full path of the child component in the parent component to write the child component

3. To define a component in a parent component, you also add a router-view element.

Case: route naming View to implement Classic layout

Named views use the components attribute (not component) when defining routes:

Var routerObj = new VueRouter ({routes: [/ / the component here can only use component objects, but not the name of the registered template {path: "/", components: {default:header, left:leftBox, main:mainBox}},]})

Several components are defined as follows

Var header= {template:' header area'} var leftBox= {template:' left menu area'} var mainBox= {template:' body content area'}

When we use the above named view on the page, we use the name property of router-view to define

Those who do not use the named attribute t-name to set the view component will use the default named view

Set the style.

Html,body {margin: 0; padding: 0;} H2 {margin: 0; padding: 0; font-size: 16px;} .header {background-color: # 6495Ed; height: 200px;} # container {display: flex; height: 600px;} .left {flex: 2; background-color: # 0000FF } .main {flex: 8; background-color: # 8A2BE2;} that's all for "how to use Vue-Router". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.