vue-router-安装和配置方式

vue-router-安装和配置方式

目前前端流行的三大框架，都有自己的路由实现：
1.Angular的ngRouter
2.React的ReactRouter
3.Vue的vue-router

vue-router
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

安装和使用vue-router
直接使用npm来安装路由即可
步骤一：安装vue-router

npm install vue-router --save

–save 因为在运行的时候还需要
步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
第一步：导入路由对象
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

src文件里面创建一个router文件，在router文件里面创建一个index.js文件
index.js文件中配置路由

配置路由相关的信息：

import VueRouter from 'vue-router'
import  Vue from 'vue'

//1.通过vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routers=[

]
const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routers
})

//3.将router对象传入到vue实例
export default router

最后将配置好的文件传入main.js文件中
在Vue实例中挂载

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})