爱站网怎么使用,创建个人商城网站,网站点击量怎么查,温州营销网站公司哪家好目录
一、嵌套路由
1、路由定义
2、代码例子
3、重定向
二、懒加载
1、缘由
2、代码例子
三、导航守卫
1、全局前置守卫
2、全局后置守卫
3、meta元信息
四、生命周期
1、解释
2、执行顺序
3、例子
五、keep-alive组件缓存#xff08;保活#xff09;
1、介…目录
一、嵌套路由
1、路由定义
2、代码例子
3、重定向
二、懒加载
1、缘由
2、代码例子
三、导航守卫
1、全局前置守卫
2、全局后置守卫
3、meta元信息
四、生命周期
1、解释
2、执行顺序
3、例子
五、keep-alive组件缓存保活
1、介绍
2、属性
3、代码例子 一、嵌套路由
1、路由定义
1通过路由配置定义好组件在路由层面映射的嵌套层级使用children定义子路由
2注意子路由中的path不以/开头若写了/则会提升为一级路由
2、代码例子
1App.vue文件
h1router-link to/home主页/router-link |router-link to/news新闻/router-link
/h1
router-view /
2router文件夹下index.js文件
import Vue from vue;
import VueRouter from vue-router;
import HomeView from ../views/HomeView.vue;
import Hot from ../views/news/hotPage.vue
import Tnews from ../views/news/TnewsPage.vue
import News from ../views/news/NewsPage.vueVue.use(VueRouter);const routes [{path: /,name: home,component: HomeView,},{path: /news,name: news,component: News,children: [{path: hot, //注意路径没有/component: Hot,},{path: tnews, //注意路径没有/component: Tnews,},],},
];const router new VueRouter({mode: history,base: process.env.BASE_URL,routes,
});export default router;NewsPage.vue文件
navrouter-link to/news/hot热点新闻/router-link | router-link to/news/tnews国际新闻/router-link
/nav
router-view /
3、重定向
routes的每一层都可以重定向
const routes [{path: /,redirect:Home,//对应component注意Home要引号引起来},{path: /news,name: news,component: News,children:[{path:,redirect:Hot,},{path:hot,component:Hot,},{path:tnews,component:Tnews,},],},
]; 二、懒加载
1、缘由
①问题当每个组件都在定义路由前import 打包构建项目时js包会变得非常大影响页面加载 ②解决把不同路由对应的组件分割成不同的代码块当路由被访问时才加载对应组件会更高效 ③格式()import(vue文件路径)
2、代码例子
const routes [{path: /,redirect: { name: Home }, //重定向也要改格式},{path: /home,name: Home,component: () import(/views/HomePage.vue),},
];
三、导航守卫 作用通过跳转或取消的方式守卫导航有些页面需要权限校验才能进入 多种方式全局单个路由独享组件级 1、全局前置守卫
1场景路由开始跳转前未进行跳转时需要在回到函数中手动调用next()放行路由
2格式
router.beforeEach((to,from,next){})
①to即将要进入的目标路由对象 ②from当前导航要离开的路由 ③next(/)一定要调用该方法resolve这个钩子执行效果依赖next方法的调用参数
next()放行路由跳转会跳转到原定目标页面next(false)中断当前的导航如果浏览器的URL改变了那么URL会重置到from路由对应的地址next(/)、next({ path: / })路由重定向可以向next传递任意用在router-link的【to属性值】或router.push的选项
3注意
必须确保next函数在任何给定的导航守卫中都被严格调用一次
①代码例一
router.beforEach((to,form,next){//如果未登录且目标不是登录页则重定向到登录页且return掉函数if(to.name ! Login !isAuthenticated) return next({name:Login})//放行路由next()
})
②代码例二
router.beforeEach((to,from,next){console.log(to,to);console.log(from);next()
})
2、全局后置守卫
1场景进入页面后的守卫与前置守卫不同的是没有next函数因此不会改变导航
2格式
router.afterEach((to, from) {// ...
})
①to当前导航进入的目标路由对象 ②from当前导航正要离开的路由
3、meta元信息
说明浏览器每个页面的标题
{path:/home,name:Home,meta:{//元信息title:主页},component:()import(/views/HomePage.vue),
},
四、生命周期 图解生命周期 1、解释
1beforeCreate() 周期节点组件实例被创建之初组件的属性生效之前 注意此时无实例无dom渲染 创建实例之前执行的钩子事件
2created() 周期节点组件实例已经完全创建属性也绑定但真实dom还没有生成 注意此时仅能访问到实例数据如dada、method等
3beforeMount() 周期节点DOM刚要渲染 注意此时仅能访问到实例数据如data、method等
4mounted() 周期节点DOM渲染结束 注意此时能访问到实例数据和页面上的DOM
5beforeUpdate() 周期节点组件数据更新之前DOM未重新渲染
6update() 周期节点组件数据更新之前DOM已重新渲染
7activated() 【keep-alive专属】缓存的组件被激活时钩子函数
8deactivated() 【keep-alive专属】缓存的组件未激活时钩子函数
9beforeDestroy() 周期节点组件实例销毁前
10destroyed() 周期节点组件销毁后
2、执行顺序 3、例子
created () {console.log(新闻页面创建);
},
destroyed () {console.log(新闻页面销毁);
}, 五、keep-alive组件缓存保活
1、介绍
使用router-view切换页面组件会被摧毁并经历完整的生命周期 但是有时需要组件数据能够保存而不是每次进入就重新获取数据进行页面渲染
keep-aliverouter-view /
/keep-alive
2、属性
①include字符串或正则表达式名称匹配的组件会被缓存。 ②exclude字符串或正则表达式名称匹配的组件都不会被缓存。 ③max 数字最多可以缓存多少组件实例。
keep-alive includeHomePagerouter-view /
/keep-alive
3、代码例子
!-- Home.vue --
template
divnavrouter-link to/home/index首页/router-linkrouter-link to/home/mine我的/router-link/nav!-- 失活的组件将会被缓存--keep-aliverouter-view //keep-alive
/div
/template
