vue路由

vue-router的基本使用：

路由中有三个基本的概念 route, routes, router。

1. route：是一条路由，点击home按钮跳转到home页面，这是一条路由
2. rotures：是一组路由， [{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3. rotuer：是一个路由管理机制，当有路由请求时，会去routes中查找对应的内容
4. 客户端的路由，实际上就是dom元素的显示和隐藏，客户端路由有两种实现方式：基于hash 和基于html5 history api.---------前端路由两种实现方式

vue页面实现路由：

1. 页面实现（html模版中）：在vue-router中, 我们看到它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分， 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：Home
2. js 中配置路由：
   　 首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}　我们这里有两条路由，组成一个routes:
   const routes = [
   { path: ‘/home’, component: Home },
   { path: ‘/about’, component: About }
   ]
   　　最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
   const router = new VueRouter({
   routes // routes: routes 的简写
   })
   　　配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
   const app = new Vue({
   router
   }).$mount(’#app’)
   执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: ‘/home’, component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 标签所在的地方。所有的这些实现才是基于hash 实现的。