三 vue-router路由

• 啥是路由，传统的意义上的路由就是为每个用户分配ip地址供他们上网

那在俺们前端呢？spa应用里面进行子页面配置的一套机制
1 给不同子页面分配对应的hash（锚点）
2 通过不同hash来加载不同页面

• 为啥要用这玩意
  1 分离
  2 极大的减少了http请求
  3 单页app

---

vue-router1,1.0版本感觉有点变态

1 html

     <a v-link="{path:'/goods'}"></a>

2 js

• 引入vue-router：

import VueRouter from 'vue-router'

• 加载插件

Vue.use(VueRouter)

• 创建路由实例

let router = new VueRouter()；

• 定义路由
  router.map({
  '/goods':{
  components:对应组件
  }

})

2 vue-router 2.0

---

官网地址https://router.vuejs.org/zh-cn/essentials/getting-started.html

2.0的vue-router比较简单

第一步：啥话不说，你首先要这个依赖引进来吧（你要开饭馆肯定要找个师傅吧） import VueRouter from 'vue-router'

第二布：使用他（招进来肯定要用的嘛） Vue.use(VueRouter)

第三布：创建路由对象 const router = new VueRouter({})

这个对象的参数就比较有意思了，我们看到里面的参数是一个json，比较常用的有{

linkActiveClass: ' 自己定义的那个当地点击操作后的按钮Class'

routes: ‘路由匹配对象，简单点就说那个访问那个路由，以及对应应该显示的页面（组件）"

const routes = {'path':’/goods",component: 我是组件}

}

第四布：将路由对象挂载到实例化的vue对象中 new Vue({ el:'#app",router:router })