Vue2项目架构搭建（八）—— vue-router2路由配置和调用

路由是SPA子页面的跳转机制，Vue的官方路由是vue-router。

安装路由

vue-cli在创建项目时有询问是否创建vue-router，如果选了Y，vue-cli已经将路由安装好了,可以直接跳过安装和引入，直接去配置组件；如果选了N，执行

npm install --save-dev vue-router

路由配置

安装好之后，在router文件夹下的index.js中引入vue和vue-router

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

引用并判断vue-router插件是否安装

Vue.use(Router)

创建路由对象

export default new Router({
  routes: [
    {
      path: '/',
      component： componentName
    }
  ]
})

添加路由组件
将要跳转的路由添加到路由对象的子对象中，先引入组件到router.js中，再配置到路由。
下面将三个子组件写入到路由，默认第一页显示firstVue组件：

import Vue from 'vue'
import Router from 'vue-router'
// 跳转的组件
import firstVue from '@/components/firstVue.vue'
import secondVue from '@/components/secondVue.vue'
import thirdVue from '@/components/thirdVue.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: firstVue
    },
    {
      path: '/secondVue',
      component: secondVue
    },
    {
      path: '/thirdVue',
      component: thirdVue
    }
  ]
})

路由引入

安装配置完成就可以直接将路由引入到当前vue实例去检测了，在main.js中引入router

import router from './router'

再将router加到当前Vue实例中

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

调用路由

vue-router提供了跳转链接组件router-link和显示内容组件router-view，调用方法如下：

<router-link to="/pathName">link-name</router-link>
<router-view />

修改App.vue文件的template即可点击查看切换效果

<template>
  <div id="app">
    <router-link to="/firstVue">FirstVue</router-link>
    <router-link to="/secondVue">secondVue</router-link>
    <router-link to="/thirdVue">thirdVue</router-link>
    <router-view/>
  </div>
</template>

路由具体知识可查看Vue-router官方文档

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。