vue(六)之路由导航守卫

Vue CLI2详解

package.json文件中dependencies是运行时依赖，devDependencies是开发时依赖
** vue程序运行过程：template->ast->render->virtual dom->真实dom**
runtime-compiler的运行过程：template->ast->render->virtual dom->真实dom
runtime-only的运行过程:render->virtual dom->真实dom。所以这种方式更快，性能更高，同时代码量也更少
runtime-only的情况下.vue文件中的template是由vue-template-compiler进行处理的

main.js中的render的原理

被传入的组件

vue-cli3与2的区别

箭头函数类似于java8lambda表达式

定义函数的方式一

定义函数的方式二

将方式一函数改为箭头函数

两个参数的情形

一个参数的时候小括号可以省略

函数块内多行代码的情形

函数块内只有一行代码可以进行简写

后端路由

前端路由

spa: single page application web

通过hash改变url

url的history

replaceState相对于pushState的区别：不能前进后退

vue-router

具体代码实现

第三步将router对象传入vue实例里面
先导出

然后再在vue导入引用，导入的时候是默认去找文件夹中的index.js文件

使用vue-router

router-link用于链接到某个地址，最终会被渲染为一个a标签，router-view将对应的组件渲染到也页面的相应位置

设置路由的默认路径

路劲访问的时候的默认是hash模式，此模式下路径中可能会存在#号，所以可以改为history即可解决,在router中将mode设置为history即可

router-link的其他属性

代码实现

在每个router-link设置active-class属性比较麻烦，可以直接在router中设置linkActiveClass:'active’就能为每一个router-link设置上active-class属性了

通过代码跳转路由：主要是通过vue组件自带的$router属性，有replace和push两个方法

动态路由

一:在router的path结尾加上:和一个变量名

二：在跳转处拼接上对应abc的值

三：还可以通过$route获得对应的值

$router与 $route的区别： $router是获取所有的router， $route是获取当前被激活的router

通过 UglifyJsPlugin对打包的js文件进行丑化

路由懒加载的效果

使用懒加载后，打包成的业务js文件就会因为懒加载组件的数量而产生相应的改变

实现懒加载

具体的代码实现

路由嵌套

子路由不加’/'


通过router-view将子组件添加到父页中

参数的传递

代码实现：在query中填入对象属性

然后就会出现在地址的后面

然后再通过$route取出来

使用query以代码的方式跳转页面

导航守卫具体案例

前置守卫(guard)beforeEach,路由跳转之前调用：其中next()必须写上

其中的meta.title是在路由里面写入的

后置钩子(hook)afterEach，路由跳转之后调用

还有一些路由独享的守卫，具体可以查看vue-router的官网

路由独享的守卫例子，beforeEnter

使用keep-alive避免某些组件的重复加载

具体的代码实现

activated与deactivated能否使用取决于展示的组件是否被keep-alived包裹

Profile.vue希望每次重新加载的实现

将profile中的name放入exclude中即可

将多个页面写入exclude中时，如同正则表达式的一样，逗号后不要加空格