Vue-Router是Vue的官方路由器，它和Vue的核心深度集成，让构建单页面应用变得亦如反掌。
阅读VueRouter的源码需要深刻理解Vue才能完全理解,因为它里面很多概念用到了Vue，相比较vuex、axios，我认为Vue-Router的源码比较晦涩，难以理解，原因如下:
- Router-view是一个函数式组件，它的渲染需要理解父子组件的一个链的一个知识
- Router-Link组件自定了render函数
为了更好理解Vue-Router,我计划分8篇文章来讲，计划这个月底前写完(4月份开始写React的知识了)
- VueRouter的使用方法
- VueRouter的设计思想及代码结构
- VueRouter实例的属性和方法
- $router与$route的区别
- router-link组件的用法及原理
- router-view组件的用法及原理
- VueRouter.push()的详解
- 导航守卫的用法和原理
writer by:大沙漠 QQ:22969969
VueRouter使用前需要npm install安装一下:
writer by:大沙漠 QQ:22969969
npm install vue-router
然后先用Vue.use(Router)安装一下VueRouter这个插件，再创建一个VueRouter示例，一般单独创建一个router目录，用于存储router的对象,如下:
import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import Login from '../components/Login' Vue.use(Router) //安装VueRouter export default new Router({ //导航VueRouter的实例 mode:'history', routes: [ { path: '/login', name: 'login', component: Login }, { path: '/', name: 'home', component: Home } ] })
最后在创建根Vue实例的时候通过router属性传入这个对象就可以了
为了实例方便，我们用script标签引入一下vue、vuerouter，如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueRouter Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script> </head> <body> </body> </html>
这样就可以在body内写测试例子了，如果是通过script标签引用vue、vuerouter的话，VueRouter插件会自动安装的，不需要调用Vue.use(Router)来安装了
OK，环境搭建好了，现在来个例子(后面的例子都把代码放入上面的<body></body>标签内即可)，如下:
<div id="app"> <h1>Hello App!</h1> <router-link to="/login">登陆</router-link> <router-link to="/hello">Hello页</router-link> <router-link to="/info/13">详情页1</router-link> <router-link to="/info/12">详情页2</router-link> <hr/> <router-view></router-view> </div> <script> const login = { template:'<div>Login Page!</div>'} //定义三个组件 const hello = { template:'<div>Hello World!</div>' } const info = { template:'<div>id:{{this.$route.params.id}}</div>'} const routes = [ //定义路由指向 {path:'/login',component:login}, {path:'/hello',name:'user',component:hello}, {path:'/info/:id',component:info}, ] var router = new VueRouter({ //创建一个VueRouter实例 routes }) const app = new Vue({ el:'#app', router:router //创建Vue实例时传入router即可 }) </script>
这里我们创建了一个Vue和一个VueRouter实例，并把VueRouter的实例作为router属性传递给Vue,页面渲染如下:
组件写得比较简单，我们通过new VueRouter创建VueRouter实例时可以传入一个对象，该对象可以传递如下键:
- routes ;路由的记录，是个数组，每个元素是一对象
- mode ;路由的模式 ;可以设置为:hash(默认的模式)、history、abstract(非浏览器模式下)
- base ;应用的基地址 ;如果整个单页应用服务在/app/下，那么base应该设为"/app/"
- linkActiveClass ;全局配置 <router-link> 默认的激活的 class
- linkExactActiveClass ;全局配置 <router-link> 默认的的精确激活的 class
- scrollBehavior ;和滚动行为有关
- parseQuery/stringifyQuery ;提供自定义查询字符串的解析/反解析函数。覆盖默认行为
- fallback ;当浏览器不支持history.pushState控制路由时是否应该回退到hash模式，默认为true
比较常用的就是router了，是个对象，可以传入如下键:
- path ;该路由的路劲
- name ;该路由的name
- redirect ;重定向相关
- meta ;路由元信息，可以存储该路由的一些属性，很有用的
- components ;对应的组件，值是一个对象格式，和命名视图相关
- component ;默认组件，是个字符串格式
- alias ;别名
- children ;路由嵌套相关
- beforeEnter ;导航守卫相关
VueRouter提供了两个组件:
- router-link 支持用户在具有路由功能的应用中 (点击) 导航， ;就是渲染出一个元素(默认为a),触发该元素上的事件会产生路由跳转
- router-view 渲染路径匹配到的视图组件 ;根据当前环境寻找到合适的组件并渲染出来
具体到每个点的介绍，后面再介绍，本篇先开个头，下一篇文章讲解VueRouter的设计思想及代码结构