Vue学习（第七天）
Vue学习（第七天）
一、路由知识补充
1.动态路由
在配置路由映射关系的时候配置动态路径，比如在user后面动态的添加userId
{path: '/user/:userId',component: () => import('../components/User.vue'),meta: {title: '用户'}},
2.路由懒加载
由于当前是SPA，即再第一次请求资源时请求的是全部的资源，若资源过大则会导致页面出现短暂的空白，采用懒加载可以有效的避免这一情况，再需要用到指定的组件时在发出请求
const Home = ()=>import('./components/Home');
{path:'/home',component:home
}
3.打包文件的解析
- app.js 所写代码
- manifest.js 底层支撑代码
- vendor.js 第三方代码
4.嵌套路由
- 创建对应的子组件，并且在路由映射中配置相应的子组件
- 在组件内使用标签
{path: '/home',component: () => import('../components/Home'),children: [{ //配置子路由映射关系path: '', //默认重定向redirect: 'news'},{path: 'news', //不需要加/component: () => import('../components/HomeNews')//懒加载}, {path: 'messages',component: () => import('../components/HomeMessages')}],meta: {title: '首页'}},<template><div><h2>我是首页</h2><router-link to="/home/news">新闻</router-link><router-link to="/home/messages">消息</router-link><router-view></router-view></div>
</template>
5.参数传递
方式一：params类型
配置路由格式
/router/:userId
传递方式：在path后面跟上对应的值
传递后形成的路径
/router/123,/router/abc
获取值
this.$route.params.userId
方式二：query方式
配置路由格式：普通配置即可
传递方式：对象中使用query的key作为传递方式
传递后形成的路径
/router?id=123
获取值
//传递值
<router-link :to="{path:'/profile',query:{name:'lele',age:18}}" replace>档案</router-link>
//获取值
{{$route.query.name}}
{{$route.query.age}}
6. r o u t e r 和 router和 router和route
-
$router
//$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象 -
$route
$route相当于当前处于活跃状态的路由对象，可以从里面获取name,path,params,query等。
二、导航守卫
1.生命周期函数回顾
- created：组件被创建后回调该函数
- mounted：挂载到整个DOM上时回调该函数
- update：界面发生更新时回调该函数
2.基本使用
全局导航守卫
router.beforeEach:全局前置守卫
router.afterEach:全局后置置守卫
案例演示：当组件发生变化时改变页面的标签名称
router.beforeEach(function(to,from,next){to:即将要进入的目标的路由对象from：当前导航即将要离开的路由对象next();//必须调用 调用该方法后，才能进入下一个钩子从from跳转到todocument.title = to.matched[0].meta.title //设置标题名称 title的值需要在配置路由映射关系时设置
});
路由独享守卫
是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的
const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})
组件内的守卫
beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
三、keep-alive
顾名思义，当离开组件时组件不会被destroyed，即缓存
activated与deactivated
以上两个回调函数必须在keep-alive下才会被回调，其中activated时当处于活跃状态下发生回调，而deactivated是当变为不活跃状态时发生回调
//记录子路由的历史选项activated() {console.log('activated');this.$router.push(this.path);},
include与exclude
设置哪些组件缓存，哪些组件不缓存1
<keep-alive exclude='Profile,User'><router-view></router-view></keep-alive>
发布评论