认识vue-router

目前前端流行的三大框架,都有自己的路由实现:

Angular的ngRouter

React的ReactRouter

Vue的vue-router

 * vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.

* 我们可以访问其官方网站进行学习:https://router.vuejs.org/zh/

* vue-router是基于路由和组件的

        路由用于设定访问路径,将路径和组件映射起来.

        在vue-router的单页面应用中,页面的路径的改变就是组件的切换.

*安装和使用vue-router

 步骤一: 安装vue-router

        npm install vue-router --save

步骤二: 在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

  第一步: 导入路由对象,并且调用Vue.use(VueRouter)

  第二步: 创建路由实例,并且传入路由映射配置

  第三步: 在Vue实例中挂载创建的路由实例

*使用vue-router的步骤

  第一步: 创建路由组件

   第二步: 配置路由映射: 组件和路径映射关系

   第三步: 使用路由: 通过<router-link>和<router-view>

<router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签.如图:

 

<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.

网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级

在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.

路由的默认值和修改为history