Vue 笔记（三）- vuex, vue-router

作用：管理多个组件或者全局共享的状态。

将复杂的、需要共享的逻辑处理放入actions中共享。

( 为什么在store中执行 Vueuse(Vuex) ，而不是在mainjs中？

执行顺序问题。脚手架处理文件中的 import x from '/yyy' 这类语句时，不管它们位置如何，相当于放在文件开头执行。)

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

多个组件需要共享数据时

补充：

启用module写法，但不设置namespaced时：actions, mutations, getters 依然挂在全局，使用方式无变化。对于state： $storestatea 。

此时使用mapState，两种写法均报错，原因不明。

1作用：可以简化路由的跳转。

2如何使用

(1)给路由命名：

(2)简化跳转：

作用：让路由组件更方便的收到参数，直接从props中拿到xxx，而不必写$routequeryxxx (路由组件指作为页面的组件)。

($route的meta项中可以放一些关于路由的自定义信息)

（路由文件中的beforeEnter和组件内的beforeRouteEnter区别之一是后者可以 *** 作组件内的data和methods等。

导航解析流程：先在路由配置里调用 beforeEnter，再在被激活的组件里调用 beforeRouteEnter，若前者未通过，则后者不会被调用）

本文介绍了

在用户使用应用程序时，Angular 的 路由器 能让用户从一个 视图 导航到另一个视图。但是当你想要获取url里面的一些值呢？下面是几个方法获取Route对象。

SEO：搜索引擎优化，

前端路由：控制页面访问路径，单页面应用

后端路由：控制接口

1，URL的hash,locationhash

2,HTML5的history模式，historypushState(data,title,url)

使用vue create '文件名'，创建一个vue脚手架，

vueuse(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vueprototype$router(整个项目的路由对象)和vueprototype$route(当前活跃的路由对象)

实例化一个VueRouter对象

router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路径内容加载进来，替换掉router-view

vueRouter跳转页面的方式有用this$routerpush('/home')，this$routerreplace()和用标签<router-lin>

this$routerpush('/homekey='+vaule+'&key1='+vaule1)。在另一个页面用this$routequery获取传过来的值

第一种

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

接收参数

第二种

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

接收参数都是一样

第三种

在路由规则里定义如下

pid是一个变量，在用这个动态路由的时候可以

懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度。

路由懒加载很简单，在component用import引入组件，如下：

router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则

注意：路由视图组件router-view标签不要漏了

又比如此处案例

    22 需要传参的地址，例如Goodsvue的地址需要传参数id

        221    首先在路由中开启props：true

        222    在Goodsvue中，接受参数props：[ 'id' ]

        223    然后引入组合式api，使用规则如下所示

设置如下（ 加粗字体为模块化全局状态管理的引用方式 ）

首先引入组合式API，import { useStore } from "vuex";

注意：加粗字体是模块化全局状态管理的使用规则的不同点（数据， 计算属性（需要加上中括号） ，函数的不同）

在store中建议文件夹modules，并在其中新建phonejs模块，编译如下，

注 意点：设置私有命名空间（加粗字体），其他照旧

        411   在src中新建工具包utils，其中建立文件indexjs文件，编译如下函数

            412 在组件中引用

            413 在组件中使用（注意：上述文件只能映射数据，不能映射方法）

            加粗字体是映射函数的使用方式（删减和应用方式）

以上就是关于Vue 笔记（三）- vuex, vue-router全部的内容，包括:Vue 笔记（三）- vuex, vue-router、Angular 6中 获取URL(Router中path值)、vue路由router,routes,route等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！