文章目录
前言
自学前端,此文用来记录学习Vue以及做项目中遇到的问题以及解决方法。
一、路由守卫以及路由跳转之间的问题
1、express是什么?
Express 是 基于 Node.js 平台,快速、开放、极简的 Web 开发框架。
Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
Express 是最流行的 Node 框架,是许多其它流行 Node 框架 的底层库。
诸如app.××× requests
2、路由守卫以及跳转
一般的电商项目分为注册、登录、首页、购物车、结算、地址、支付、我的等路由模块。
而完善的路由功能分为以下步骤,逻辑要清晰:
1、用户未登录之前只能作为游客身份浏览网页,此时可以执行查看首页首页,不可以执行结算、地址、支付等操作
2、未登录用户在点击购物车和我的面板时,要弹出消息并提醒用户前往登录。
3、未注册用户不能登录,此功能为后端校验。注册完成之后跳转到登录路由,登录成功返回专属token,在浏览每个页面时都要携带自己的专属token。
4、根据是否携带token来判断用户是否登录,
(1)已登录:则左上角显示用户头像和昵称等
(2)未登录:左上角显示请登录
3、后台管理系统权限设置相关问题
昨天做完b站尚品汇后台管理系统,发现登录之后的非主页刷新会有页面白屏的问题,后来查阅多方资料以及实践得知,是动态路由发生了冲突。
let flag = 0 // flag目的是区分已登录,未登录
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// 在路由跳转前判断是否被添加成功--解决除首页外其他页面浏览器刷新空白问题
if (flag === 0 && to.matched.length === 0) { // 登录成功,刚开始路由并未添加,flag和to.matched.length为0
flag++
next({ path: to.path }) // 展示首页
} else if (flag !== 0 && to.matched.length === 0) { // 刷新的时候重新加载页面,此时flag为1
// 不会跳到默认的首页,而是next(false) 保持原页面不动
// next({ path: '/' })
next(false)// 此处为重点,非home页刷新后阻止跳转则回到了刷新前的页面
} else {
next()
}
修改路由判断最后解决了问题。却又发生路由名重复的警告,充满控制台,查阅资料及实践得知router.addroutes 并不会清除之前已经有的路由,导致动态路由与已有路由重复,在添加动态路由之前初始化一下路由即可
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
resetRouter()
router.addRoutes(state.resultAllRoutes)
二、路由跳转传递参数问题
1、通过params,query传递参数
this.router.push({name:'路由name',prams:{k:v},query:{k:v}})
2、通过props传递参数
在路由index.js 界面设置props。
1> props:true 跳转之后的路由可以接收params参数也只能接收params参数
2> props:{k:v} 可以接受任何自定义参数
3> props:
($route)=>
{
return
{keyword:$route.params.keyword,k:$route.query.k}
}
函数写法,可以同时接收params和query
3、父子通信$attrs $listeners
$attrs可以接受父传过来的所有属性 v-bind = " $attrs "
$listeners可以接收父传过来的所有事件 v-on = " $listeners "