三千越甲可吞吴

---

前言

自学前端，此文用来记录学习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 "