This article mainly refers to the technical fat teacher’s video tutorial.

Introduction to the

Due to the lack of routing support in Vue at the time of development, the vuE-Router plug-in was officially added. It is very important in the Vue ecosystem. In the actual development, as long as a page is written, the vue-Router will be operated. To learn vue-router, you need to know what is the route here? The routing here is not a hardware router as we normally call it, the routing here is a SPA (single page application) path manager. More commonly, vue-Router is the link path management system of WebApp. Some people may wonder why we can’t write links with tags as before. Since we use Vue as a single-page application, which is equivalent to having only one main index.html page, your tags don’t work, you have to use vue-Router to manage them.

Unscramble the router/index.js file

We used vue-CLI to produce our project structure, which you can find in the SRC /router/index.js file, which is the core routing file. Let’s take a look at it first.

import Vue from 'vue'// Introduce Vue import Router from'vue-router'// import vue-router import Hello from'@/components/Hello'Use (Router) //Vue uses Router globallyexportDefault new Router({routes: [// routes:]) default new Router({routes: [// routes:])'/'// Link path name:'Hello', // Route name, Component: Hello // corresponding component template}]})Copy the code

Add a Hi route and page

Now that we are familiar with the routing core file, we are trying to add a routing configuration. We want a new page to appear when we type http://localhost:8080/#/hi in the address bar. Let’s see what we want. The specific operation steps are as follows:

  • In the SRC/Components directory, create a new hi. vue file.
  • Write the document. As we’ve discussed before, the document has three parts< the template > < script > and < style >. The file is simple, just print a sentence.
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hi'.data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
 
 
<style scoped>
 
</style>
Copy the code
  • Introducing the Hi component: We introduce the Hi component at the top of the router/index.js fileimport Hi from '@/components/Hi'
  • Add route configuration: Add a new object to the Routes [] array in the router/index.js file.
{
  path:'/hi',
  name:'Hi',
  component:Hi
}
Copy the code

Router-link Creates the navigation

It is now possible to change the content of the page by changing the string address in the address bar. That’s not what we need, we need a decent navigation link on the page that we can click on to change the content of the page. Let’s look at the syntax of the

tag used to make links.

Zi lu by

Modify the navigation code of app.vue

App.vue code, note the use of

.

<template>
  <div id="app">
    <img src="./assets/logo.png"> <p> Navigation: <router-link to="/"> home page < / router - the link > | < the router - link to ="/hi"> Hi page < / router - the link > | < the router - link to ="/hi/hi1"> - Hi page 1 < / router - the link > | < the router - link to ="/hi/hi2"> -hi page 2</router-link> <router-link to="/hi1"</router-link> </p> <router-view/> </div> </template> <script>export default {
  name: "App"
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Copy the code

Rewrite the Components/hi.vue page

Make hi. vue a generic template and add tags to provide insert locations for child templates. “Hi page 1” and “Hi page 2” are both child pages of “Hi page”, sort of trying to inherit. We added tags to the “Hi page”. Hi1.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi'.data () {
    return {
      msg: 'Hi, I am Hi1! '
    }
  }
}
</script>
<style scoped>
 
</style>
Copy the code

Hi2.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi'.data () {
    return {
      msg: 'Hi, I am Hi2'
    }
  }
}
</script>
<style scoped>
</style>
Copy the code

Hi. Vue code

Note the new router-view

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view class="aaa"></router-view>
  </div>
   
</template>
 
<script>
export default {
  name: 'hi'.data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
 
 
<style scoped>
 
</style>
Copy the code

Modify the router/index.js code

We now have navigation, mother and child templates, and we just need to change our routing profile. The children field is added to the original route configuration.

children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
Copy the code

The children field is followed by an array, which is basically the same as the other configured routes. You need to configure path and Component. Take a look at the configuration of this subroute.

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 
 
Vue.use(Router) 
 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})
Copy the code

Refer to the link

Technical fat vue – the router