vue-router

前言

在使用过各种框架过后，想必很多人都被深深植入一个概念路由。而各个框架实现路由不尽相同，都有着各自独有的特点，不过路由最终的目的是殊途同归的，跳转页面，传递参数等，在此写个关于vue-router的文章，一是复习，二是加固对vue-router的认识

vue-router的安装

使用npm安装即可，如果在初始化vue项目选择了安装vue-router，就不用继续安装，没有的话，执行以下命令

#npm install vue-router --save

使用vue-router

前提已经搭建好vue项目
新建router.js文件和vue模板文件hello.vue文件

hello.vue文件

router.js

import Router from 'vue-router'
import Vue from 'vue'
import Hello from './hello.vue'

Vue.use(Router)

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

模板入口文件app.vue

在vue入口文件引入
一般为main.js

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

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

这样就完成一个简单的router，router的主要配置在router.js里完成，首先要使用Vue.use把Router挂载到vue实例上，用new Router()实例化router，并export出去，Router()里面接受一个对象，主要为routes属性，为一个数组（Array），支持多个对象元素，每个元素对应一个路由页面配置。
routes对象元素参数意义

path：(string)path是路由的地址
component：(Component)component是路由指定的页面，实质为一个vue组件
children：(array)子路由，同样是一个数组，类似routes，支持多个对象元素
redirect：(string)重定向，指定未匹配到的路由地址跳转地址

详细配置请参考vue-router文档