vue学习模块记录二 (vue-router 基本使用)

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

客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

2，页面实现（html模版中）

<router-link> 和<router-view> <router-link to="/home">Home</router-link>

3:js中的路由

　　首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成：

path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}

我们这里有两条路由，组成一个routes:

扫描二维码关注公众号，回复： 4238673 查看本文章

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 一一对应，从而找到了匹配的组件，最后把组件渲染到 <router-view> 标签所在的地方。

所有的这些实现才是基于hash 实现的。

4：动态路由

5：嵌套路由

6：命名路由

7：编程式导航

这主要应用到按钮点击上。当点击按钮的时候，跳转另一个组件, 这只能用代码，调用rourter.push() 方法。当们把router 注入到根实例中后，组件中通过 this.$router 可以获取到router, 所以在组件中使用

this.$router.push("home"), 就可以跳转到home界面