Vue3 路由与状态管理

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