vue-router

HTML5的history

location.hash = 'aaa' 修改URL 
history.pushState({},'','about')  栈 先进后出 
history.back()  删除  相当于点击返回箭头
history.replaceState({},'','home')    不能返回
history.go(-1)   等于back 删除一个  也可以正数
history.forward(1)  等于go(1) 

vue-router

1. 安装
   之前创建cli2 项目的时候 装了vue-router

npm install vue-router --save

2. 自己配置

创建router文件夹 再创建index.js

• 导入vue、vue-router

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

• 通过Vue.use(插件)，安装插件

Vue.use(Router)

• 创建Router对象

• 导出对象到Vue实例
  这两步合在一起写变成

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


//分开写则是

const route = []
const router = new Router({
	route
})
export default router

• 在main.js里导入路由 router文件下不写文件名 默认找inde 挂载router

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

import router from './router'
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
  })

• 创建路由组件
  
  复制一份 Home.vue
  

• 配置路由映射 组件和路径映射关系
  

• 使用路由 通过 router-link router-view