Vue3 路由与状态管理

Vue3 路由

main.js 如果 router、store 里面都是 index.js 那么 index.js 是可以省略的，如果是自配置项不是这个名字，则必须加上，如 index1.js，就必须把 index1.js 也加上import router from './router/index1.js'
历史模式可以使用 window.history 对应的方法
路由默认在 router 里配置
页面级组件默认在 views 里配置
配置步骤：
- 在 views 里面建好新的组件
- 在 router 的 index.js 里面引入创建路由的方法 createRouter 跟创建历史的方法，这里可以选择是历史还是哈希等
- 将创建路由声明一个路由器常量导出
- 常量中配置两项内容，第一个是创建历史的方法，另一个是多个路由及页面的指向
- 在路由里配置每一个页面
- router/index.js 路由中配置内容：
  1. 指定 path 路径，格式是/+路径名称，如：path:'/page'
  2. 起一个名字，这里需要注意名字不要重名，我们要根据这个名字去找这个组件
  3. router/index.js 导入相关组件
  4. 使用 component 使用组件
  5. 如果都放在路由常量中，会出现一个问题，就是打包后，所有的文件都会进入到一个 js 中，也就是每次不管加载哪个页面，所有的 js 都会加载一次，处理方法就是使用懒加载
  6. 懒加载是一个匿名函数导入的方式，即用const Page = ()=>import('../views/Page.vue')替换掉import Page from '../views/Page.vue',然后 component 的值就用这个常量即可
  7. 懒加载后每次打包每个页面组件都会单独生成一个 js 文件
历史模式可以使用 history 对应的方法
可以通过更改 createRouter 的参数改变创建历史的方法
路由里可以获取到路径、全名等信息，路由器可以做分发用
$route 当前路由
- $route.path 获取当前路由的相对路径
$router 路由器分发用
- $router.push(‘/page’,{}),里面两个参数，第一个是地址，第二个是要加的参数
$route与$router 注意不要丢了前面的$符号
在 data()或者 methods 里用的时候别忘了前面加 this
children 加子路由,子路由里面加数组，数组内是子路由相关路由的信息
动态子路由两种方式，1、:+id，2、?+id
- :+id
  - 在 router 下的 index.js 配置文件里，路径后面加:id 后即可生效
  - :+id,就是路由后面直接加 /id 的内容如”./demo/src/views/name/6”
  - 可以使用$route.params.id 来获取 id 的值
- ?+id
  - 不用在 router 下的 index.js 配置文件里配置，直接路径后面加内容即可生效
  - ?+id,就是路由后面加 ?id=XX 的内容如”./demo/src/views/name?id=6”
  - 可以使用 query 来获取传参的内容,$route.query.id
- this.$router.push
- 可以使用this.$router.push({ path: "/user/info", query: { age: 28 } });这个方法直接用路由器进行传参
导航守卫
- 导航守卫按植入路由导航过程中的机会分为
  - 全局导航守卫
  - 路由独享的守卫
  - 组件内的守卫
- 导航守卫按照使用的用途不同又分为
  - 前置守卫（可以用作判断上个页面是哪里过来的，是否可以带有某些权限）
  - 后置守卫（可以将某些 404 页面等统一跳转到某个页面）
- from.fullPath 与 to.fullPath 可以获取从哪里来或者到哪里去的路径

Vuex 状态管理

当页面多个子组件或页面级组件都同时需要用到一个内容时，可以考虑使用 Vuex，设置一个超全局变量

在 store 文件夹下的 index.js 中
- state
  - state 中是存放全局变量的
  - 引用使用$store.state.变量名来引用变量
  - 需要注意这里如果用 a 标签跳到某个链接，是会刷新页面的，到时候变量存的值就会被刷新掉，需要避免使用 a 标签
- mutations
  - mutations 状态管理，过了状态管理的方法可以在 devtools 中查看状态
  - mutations 中的计算属性的参数第一个固定是 state
  - state 后面还可以加参数，这个参数可以是单个值，如果是多个值，可以传一个对象进来
  - 在 Vue 页面 methods 方法中使用 this.$store.commit()调用
  - commit()里面以字符串的形式传入函数名
  - 在 Vue 页面 methods 方法中，store 别掉了$符号
  - index.js 中 state 不要加$符号，因为他是传参进来的
- getters
  - getters 计算属性存放在这里面
  - 可以写多个计算属性的方法
  - 引用使用$store.getters.计算属性名来引用
  - 由于 getters 是一个属性，不能直接接收参数，如果必须接收参数，可以在内部写一个匿名函数去调用参数
- actions
  - actions 可以将数据库的数据处理后传给 mutations
  - mutations 再将 state 的值改变
  - actions 里的函数是一个异步回调函数
  - actions 里的函数接收的参数可以是一个上下文 context，在传参后将其结构赋值，或者直接子啊设置参数时，将其解构赋值（如{state, commit, getters},必须是这仨）
  - Vue 文件中的方法里使用 this.$store.dispatch(“actions 中的方法名”);来调用 actions 中的方法
- modules
  - 在项目较大的时候可以加一些模块的划分跟文件拆分，生成多个 state、mutations、getters、actions

Vue3 路由与状态管理

Vue3 路由与状态管理

Vue3 路由

Vuex 状态管理

更多相关文章

随机推荐