Vue Learning (6) - Introduction of Vue-Router

foreword

Vue-Router is the routing library officially recommended by Vue. Since official documents are mainly single-page, most actual projects are not like this. So this article records how to build a simple Vue application and introduce Vue-Router.

New Project

install dependencies

We still initialize the project according to the previous " Vue Learning (1) - Component Basics ".

vue create router1

Then enter the directory and install dependencies

cd router1
npm install

After that install Vue-Router in the project directory.

npm install vue-router --save

write page

Here we prepare two simple pages to show the role of routing

Write page 1:

<template>
  <div class="hello">
    <h1>页面1</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloRouter1',
}
</script>

<style scoped>
</style>

Write page 2 again:

<template>
  <div class="hello">
    <h1>页面2</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloRouter2',
}
</script>

<style scoped>
</style>

write routes

Create a folder router under the src directory. Create a new index.js in the router directory:

import Vue from 'vue'
import Router from 'vue-router'

import HelloRouter1 from '@/components/HelloRouter1'
import HelloRouter2 from '@/components/HelloRouter2'

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path : '/hello1',
      name : 'HelloRouter1',
      component: HelloRouter1
    },
    {
      path : '/hello2',
      name : 'HelloRouter2',
      component: HelloRouter2
    },
  ]
})

Line 2 loads vue-router, line 7 installs components, and lines 9-23 create a new Router. The routes attribute is an array, and each element of the array is an object, which must contain path and component attributes, path is the access path, and component is the corresponding component.

The next step is to mount the routing file to the Vue instance and modify main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

use routing

Use routing in App.vue, modify App.vue

<template>
  <div id="app">
    <router-link to="/hello1">页面1</router-link>&nbsp;&nbsp;
    <router-link to="/hello2">页面2</router-link>
    <router-view/>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>

The key to using router is <router-link> and <router-view>. <router-link> is a link similar to the <a> tag, and <router-view> is the page to be displayed.

After running the project, visit localhost:8080/

 Click the two links of Page 1 and Page 2 to observe the changes in the address bar and the page.

summary:

This article briefly talks about the basic use of Vue-Router. Readers should also find that there are many problems in such a rudimentary usage method. For example, every time router/index.js writes a page, the corresponding path must be configured. For large-scale applications, dozens or even hundreds of pages are normal. If each page needs to be configured one by one, the file will be very large and bloated, and it is not easy to maintain. Of course there are other issues, which I will discuss later.