Vue学习（六）——Vue-Router引入

前言

Vue-Router是Vue官方推荐的使用的路由库。由于官方文档以单页面为主，而实际项目大多不是这样。所以这篇文章记录一下搭建一个简单Vue应用如何引入Vue-Router。

新建项目

安装依赖

我们还是按照之前《Vue学习（一）——组件基础》的方式初始化项目。

vue create router1

之后进入目录并安装依赖

cd router1
npm install

这之后在项目的目录里安装Vue-Router。

npm install vue-router --save

编写页面

这里我们准备两个简单的页面，用来展示路由的作用

编写页面1：

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

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

<style scoped>
</style>

再写页面2：

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

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

<style scoped>
</style>

编写路由

在src目录下新建文件夹router。在router目录下新建index.js：

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
    },
  ]
})

第2行加载vue-router，第7行安装组件，第9行-23行新建一个Router。routes属性是一个数组，数组的每一个元素是一个对象，必须包含path和component属性，path是访问路径，component是对应的组件。

下一步就是把路由文件挂载到Vue实例，修改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')

使用路由

在App.vue中使用路由，修改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>

使用router的关键在于<router-link>和<router-view>。<router-link>类似于<a>标签那样的链接，<router-view>就是要展示的页面。

运行项目后，访问localhost:8080/

 点击页面1和页面2两个链接，可以观察地址栏和页面的变化。

小结：

这篇文章简单讲了Vue-Router的基本使用。读者应该也发现这样初级的使用方式会有很多问题，例如router/index.js每写一个页面，就要配置对应的路径。对于大型应用来说，几十个甚至几百个页面很正常，如果每个页面都要逐个配置，文件会非常庞大臃肿，也不便于维护。当然还有其他问题，留到以后再讲。