vue-router（vuerouter传参数）

本文目录一览：

• 1、Vue路由匹配规则routes中的name属性
• 2、vue中在当前页面跳转当前页面,解决页面初始化数据的问题
• 3、Vue路由history模式解决404问题的几种方法

Vue路由匹配规则routes中的name属性

1、name：路由的名称，用于在跳转路由时进行识别。通过给每个路由配置一个唯一的名称，可以方便地在代码中使用路由名称来进行跳转，而不必硬编码具体的路径。path：路由的路径，用于指定该路由对应的URL地址。

2、在 Vue 中，路由切换时需要注意以下几个问题： 子路由中的 name 属性和父路由中的 name 属性不可以同时出现。

3、设置name属性，可以在router-link内使用name代替path 导航守卫就是一个路径跳转的监听过滤器。第三个参数next 每一个 next 都是会严格执行的，只要守卫函数内还有 next ，就会依次执行。

vue中在当前页面跳转当前页面,解决页面初始化数据的问题

1、用一句话说呢，就是在当前页面再次跳转进入当前页面，要触发我们的渲染数据的流程。但是呢，vue-router中的特性是：只有在页面进行更新跳转后，才会重新触发我们的created，mounted生命周期。

2、方案1：使用$router.go（0）；和location.reload（），刷新当前页面，来初始化数据，可以实现，但刷新时会闪一下屏，体验并不好。

3、在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data（）获取该组件初始状态下的data。

4、当通过URL方式跳转到其他页面时，Vue会重新加载整个页面并初始化数据，这可能导致之前已经加载的数据被清空。为了避免这种问题，可以考虑使用Vue Router提供的路由导航守卫（Navigation Guards）来管理路由跳转。

5、Vue 页面跳转，一般用 vue-router 来做。 在我们创建 Vue 项目框架时，在配置文件 package.json 里面一般都有默认添加的依赖库。我们只要创建好 Vue 项目，其他的不用管了，直接用 vue-router 来实现页面跳转-传值。

Vue路由history模式解决404问题的几种方法

1、解决方案：对于VUE的router[mode： history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。但对于放到nginx下运行的时候，自然还会有其他注意的地方。

2、vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

3、history模式，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接通过路由访问 就会返回 404。

4、vue路由的两种模式，hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。