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 路由中配置内容：
- 指定 path 路径，格式是/+路径名称，如：
path:'/page' - 起一个名字，这里需要注意名字不要重名，我们要根据这个名字去找这个组件
- router/index.js 导入相关组件
- 使用 component 使用组件
- 如果都放在路由常量中，会出现一个问题，就是打包后，所有的文件都会进入到一个 js 中，也就是每次不管加载哪个页面，所有的 js 都会加载一次，处理方法就是使用懒加载
- 懒加载是一个匿名函数导入的方式，即用
const Page = ()=>import('../views/Page.vue')替换掉import Page from '../views/Page.vue',然后 component 的值就用这个常量即可 - 懒加载后每次打包每个页面组件都会单独生成一个 js 文件
- 指定 path 路径，格式是/+路径名称，如：
- 历史模式可以使用 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 } });这个方法直接用路由器进行传参
- :+id
- 导航守卫
- 导航守卫按植入路由导航过程中的机会分为
- 全局导航守卫
- 路由独享的守卫
- 组件内的守卫
- 导航守卫按照使用的用途不同又分为
- 前置守卫（可以用作判断上个页面是哪里过来的，是否可以带有某些权限）
- 后置守卫（可以将某些 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
- state