路由守卫vue 面包屑

在Vue中，路由守卫是一种用于监控和控制路由导航的机制。它可以在路由切换之前、之后或者在路由组件被复用之前触发一些特定的逻辑。其中，beforeEach是一种常见的路由守卫，它会在每次路由切换之前被调用，允许我们执行一些预处理逻辑。

在上述引用中，作者在router包下的index.js中添加了一个路由守卫。这个路由守卫的作用是，在路由切换之前，将当前路由的名称存储到localStorage中，并触发store的数据更新。具体的代码如下所示：

router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName", to.name); //设置当前路由名称
  index.commit("setPath"); //触发store的数据更新
  next(); //放行路由
});

这段代码中，通过调用localStorage.setItem方法将to.name（即当前路由的名称）存储到localStorage的currentPathName键中。接着，通过调用index.commit方法触发store中的setPath方法来更新相应的数据。最后，通过调用next方法放行路由，使路由切换继续进行。

关于面包屑，可以根据动态的路由值来生成动态的面包屑。在上述引用的例子中，可以看到路由配置中的每个路由都有一个name属性，该属性可以用来做页签。通过在路由配置中设置name属性，可以方便地生成相应的面包屑。在这个例子中，每个路由都有一个对应的name属性，比如"首页"对应的name为"home"，"用户管理"对应的name为"user"。这样，在路由切换时，可以根据当前路由的name值来动态生成对应的面包屑。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [【项目实战经验】vue的动态路由实现对应面包屑动态值显示](https://blog.csdn.net/qq_36131502/article/details/106788807)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue面包屑导航获取路由参数](https://blog.csdn.net/weixin_50622066/article/details/124573334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]