Vue Introduction: Introduces and uses the Router route

This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

This tutorial is the introduction tutorial, if there is an error, please point out the front end.

1. What is routing

The Vue Router is the official route manager of vue. js. Its deep integration with the vue.js core makes building a single page application a breeze. A route is actually a point, if I click a button on a page and I need to go to the corresponding page, that’s a route jump;

First, let’s learn three words (route, routes, router) :

Route: First of all, it is singular, translated as route, that is, we can understand a single route or a certain route; Routes: this is a complex number, indicating that multiple sets must be complex; That is, we can understand it as a collection of multiple routes. In JS, there are only two forms of collections representing different states: array and object. In fact, routes are officially defined as an array. So remember, routes is a collection of arrays; Router: This is a container that contains both of these or it is a manager that manages both of them. For example, when a user clicks a button on a page, the router looks for a route in routes.

Details please refer to the official documentation router.vuejs.org/zh/guide/es…

2. Installation and reference

npm install --save vue-router
Copy the code

Router /index.js is generated after the scaffolding is installed. In this case, you need to modify router/index.js.

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Use (Router) export default new Router({routes: [{// path: '/ / import name: 'HelloWorld', Component: HelloWorld}, {// path: '/hello2', // Import name: name: 'HelloWorld', component: HelloWorld}, {// path: '/hello2', // Import name: name: 'HelloWorld2', component: HelloWorld2 }] })Copy the code

App.vue and then in the app.vue, the router tag will display helloWorld.vue.

<template>
  <div id="app">
  QWER
   <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
  return {
 }
}
}
</script>

<style>
</style>
Copy the code

Then visit http://localhost:8080/#/, http://localhost:8080/#/hello, and http://localhost:8080/#/hello2 separately to jump to different pages

3. Simple use in projects

Vue is the main entry, testLink is the navigation, according to testLink’s navigation, jump to different pages, router-view is to display different views according to the navigation.

app.vue

<template> <div id="app"> QWER <TestLink /> <router-view></router-view> </div> </template> <script> import TestLink from  "./components/TestLink.vue" export default { name: 'App', data () { return { } }, components:{ TestLink, } } </script> <style> </style>Copy the code

Testlink.vue (/hello is the route configured in the random write two pages configure route)

<template>
<div>
   <ul>
    <li>
      <router-link tag = "p" to ="/hello">HelloWorld1</router-link>
    </li>
    <li>
      <router-link to ="/hello2">HelloWorld2</router-link>
    </li>
   </ul>
</div>
</template>

<script>
export default {
name: 'TestLink',
data () {
  return {
}
}
}
</script>

<style>
</style>
Copy the code

redirect

Redirection can be configured from/A to redirection /b. Here, when “/” is accessed, the route to anIM is redirected. / To do this, you need to modify the router/index.js file.

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' Vue.use(Router) export default new Router({routes: {path: '/', redirect: "anim"}, {// path: '/', redirect: "anim"}, {// path: '/', // route: '/', // route: '/', // route: '/'} 'HelloWorld', component: HelloWorld}, {// path: '/hello2', // Import name: 'HelloWorld2', component: HelloWorld2}, {// path: '/anim', // Import name: 'anim', Component: anim}]})Copy the code

4. Set routines by

In the case of the above code, there are two hyperlinks that can jump to TestNesting1 and TestNesting2, respectively, after you enter the HelloWorld page. The following code implements the scenario for embedding.

<template> <div> <script> export default {name: 'TestNesting1', data () { return { } } } </script>Copy the code

Create a hyperlink in HelloWorld as above with the configuration of the path to jump into plus its own path.

<template>
<div>
      HelloWorld
      <ul>
       <li><router-link to = "/hello/TestNesting1">11111</router-link></li>
       <li><router-link to = "/hello/TestNesting2">22222</router-link></li>
      </ul>
      <router-view> </router-view>
</div>
</template>

<script>

export default {
name: 'HelloWorld',
data () {
  return {
    }
},
methods:{

}
}
Copy the code

Configuring routing Files

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' import TestNesting1 from '@/components/TestNesting1' import TestNesting2 from '@/components/TestNesting2' Vue.use(Router) export default new The Router ({routes: [{path: '/', redirect: "anim"}, {/ / path path: '/ hello, / / into the name Incoming parameters have to be with the name: 'HelloWorld', component: Hello /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 "/hello/TestNesting1", // nested by children: [// UserHome will be rendered in User's <router-view> {// do not write/path: 'TestNesting1', component: TestNesting1}, {path: 'TestNesting2', component: TestNesting2}]}, {// Path: 'hello2', // Import name: 'HelloWorld2', Component: HelloWorld2}, {// path: '/anim', // Import name: 'anim', Component: anim } ] })Copy the code

5. Route parameter transmission

You can also pass parameters when jumping routes.

First configure the index.js parameter — add/after path:

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import HelloWorld2 from '@/components/HelloWorld2' import anim from '@/components/Anim' import TestNesting1 from '@/components/TestNesting1' import TestNesting2 from '@/components/TestNesting2' Vue.use(Router) export default new The Router ({routes: [{path: '/', redirect: "anim"}, {/ / path path: '/ hello, / / into the name Incoming parameters have to be with the name: 'HelloWorld', component: Hello /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 "/hello/TestNesting1", // nested by children: [// UserHome will be rendered in User's <router-view> {// do not write/path: 'TestNesting1', component: TestNesting1}, {path: 'TestNesting2', component: TestNesting2}]}, {// Path: '/hello2/:id/:money', // Import name name: 'HelloWorld2', Component: HelloWorld2}, {// path: '/anim', // Import name name: 'anim', component: anim } ] })Copy the code

To =”{name:’HelloWorld2′,params:{id:’111′,money:’3123123123′}}”

<template> <div> <ul> <li> <router-link to ="/anim"> </li> <li> <router-link :to ="test_router">HelloWorld1</router-link> </li> <li> <router-link :to ="{name:'HelloWorld2',params:{id:'111',money:'3123123123'}}">HelloWorld2</router-link> </li> </ul> </div> </template> <script> export default { name: 'TestLink', data () { return { test_router:"/hello" } } } </script> <style> </style>Copy the code

It is finally received by the jump page.

< span style = "box-sizing: border-box! Important; word-break: inherit! Important; word-break: inherit! Important; word-break: inherit! Important;" export default { name: 'HelloWorld2', data () { return { } } } </script>Copy the code

6. Routes are highlighted

Add the linkActiveClass: “active” attribute to the router/index.js to highlight all routes by adding the active class.

Export default new Router({path: '/', linkActiveClass: 'active ', routes: [{path: '/', redirect: "Anim"}, {// path: '/hello', // import name: name: 'HelloWorld', component: Hello /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 = /hello/TestNesting1 "/hello/TestNesting1", // nested by children: [// UserHome will be rendered in User's <router-view> {// do not write/path: 'TestNesting1', component: TestNesting1}, {path: 'TestNesting2', component: TestNesting2}]}, {// Path: '/hello2/:id/:money', // Import name name: 'HelloWorld2', Component: HelloWorld2}, {// path: '/anim', // Import name name: 'anim', component: anim } ] })Copy the code

Then add the following code to the CSS for the routing page and specify the color as red.

<style>
.active{
color:red;
}
</style>
Copy the code