vue3中router路由以及vuex的store使用解析

 更新时间:2022年03月30日 11:51:13   作者:时光在等一个人  
这篇文章主要介绍了vue3中router路由以及vuex的store使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3 router路由及vuex store使用

1.路由

<script>
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter() // 组件内路由
    const route = useRoute() // 组件内路由信息
  }
}
</script>

2.vuex

创建store

import { createStore } from 'vuex'
import login from './login'
const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    login
  }
})
export default store

组件内使用store

<script>
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const state = store.state
       const methods = {
         // 处理commit
      handleMutation: () => {
        store.commit(...)
      },
      // 处理dispatch
      handleAction: () => {
        store.dispatch(...)
      }
       }
    return {
      ...methods 
    }
  }
}
</script>

vue3中router路由和vuex的store使用,获取对象基本使用

vue3中router和store使用方法

因为在vue3的setup内不能使用this对象,所有所有直接通过this来访问的方法都不能使用了。

那么在vue3中怎么访问this.r o u t e r 或 者 t h i s . router 或者 this.router或者this.route呢?

记住一条规则:vue3中基本上所有通过this来访问的对象都换成useXxx的方式来获取。

比如说router,可以通过useRouter和 useRoute来获取router,route对象

1、企业开发Router全局配置

企业开发中在src/router/index.js中全局配置,并在main.js中添加到Vue对象

import { createRouter, createWebHistory } from "vue-router";
// 路由规则
const routes = [
  {
    path: "/",
    name: "主页",
    meta: ["istabbar"],
    component: () => import("../views/Home.vue"),
  },
];
//根据路由规则创建路由
const router = createRouter({
  history: createWebHistory(""),
  routes,
});
export default router;

在main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
// 创建VUE对象
createApp(App)
  .use(router) // 使用.use(router)添加路由router
  .mount("#app");

配置完后就可以全局使用了

1.1、Router获取及使用

先引入vue-router,再获取对象:

import { useRouter } from “vue-router”;
const router = useRouter();

但是这也不是唯一的方法,传统的和VUE3的使用方法如下:

这里提供了三种方法用于获取 router 对象

<template>
  <div class="page">
    因为在setup内部没有this访问权限,不能直接使用this访问this.$router 或者
    this.$route。所有使用useRouter, useRoute来获取
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 第一种方法:获取路由对象 router 的方法1
    const vue = getCurrentInstance();
    const router1 = vue.ctx.$router;
    // 第二种方法:获取路由对象 router 的方法2
    const router2 = useRouter();
      
    // 下面提供了router对应的方法使用大全
    // ------------------------------------------------------
    // router1.addRoute(parentOrRoute, route)
    // router1.afterEach(回调函数)
    // router1.back() 等价于 go(-1)
    // router1.beforeEach(回调函数)
    // router1.beforeResolve(回调函数)
    // router1.currentRoute 获取当前路由:如: {_rawValue: {…}, _shallow: true, __v_isRef: true, _value: {…}}
    // router1.forward() 等价于 go(1)
    // router1.getRoutes: ƒ getRoutes()
    // router1.go(delta) 等价于 routerHistory.go(delta) 跳到指定历史记录
    // router1.hasRoute(name) 判断是否有对应的路由
    // router1.isReady() 判断路由是否准备跳转
    // router1.onError(回调函数) 当发生错误的时候执行的
    // router1.options 获取所有路由信息 {history: {…}, routes: Array(5)}
    // router1.push(to) 跳转到指定路由对应的页面,有历史记录
    // router1.removeRoute(name) 动态的删除某个路由
    // router1.replace(to) 直接跳转到指定路由页面,没有历史记录
    // router1.resolve(rawLocation, currentLocation)  可以自定义跳转参数的方法
    return {};
  },
  mounted() {
    // 第三种方法:获取路由对象 router 的方法3
    console.log(this.$router);
  },
};
</script>

1.2、Route获取及使用

先引入vue-router,再获取对象:

import { useRouter } from “vue-router”;
const router = useRouter();

但是这也不是唯一的方法,传统的和VUE3的使用方法如下:

这里提供了三种方法用于获取 router 对象

<template>
  <div class="page">
    因为在setup内部没有this访问权限,不能直接使用this访问this.$router 或者
    this.$route。所有使用useRouter, useRoute来获取
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
export default {
  setup() {
    // 第一种方法:获取路由对象 router 的方法1
    const vue = getCurrentInstance();
    const route1 = vue.ctx.$router.currentRoute.value;
    console.log(route1);
    // 第二种方法:获取路由对象 router 的方法2
    const route2 = useRoute();
    console.log(route2);
    // 下面提供了route对应的属性使用大全
    // ------------------------------------------------------
    // fullPath: "/user"  完整路由路径
    // hash: "" 锚点部分
    // href: "/user"  跳转来的时候的路径
    // matched: [{…}]   路由匹配日规则数组
    // meta: {0: "istabbar"}  路由附加的元数据
    // name: "个人中心" 路由的名称
    // params: {}   路由跳转时带过来的附加参数,如果是对象需要转换成JSON格式
    // path: "/user"  编码 URL 的 pathname 部分,与路由地址有关
    // query: {}   地址附带的参数
    // redirectedFrom: undefined  重定向跳转过来之前的地址,如果没有重定向,则为 undefined。
    return {};
  },
  mounted() {
    // 第三种方法:获取路由对象 router 的方法3
    console.log(this.$route);
  },
};
</script>

2、企业开发Store全局配置

企业开发中在src/store/index.js中全局配置,并在main.js中添加到Vue对象

import { createStore } from "vuex";
//创建存储对象
export default createStore({
  // 需要存储的值都放在这里面
  state() {
    return {
      count: 0,    // 在视图中通过$store.state.count来获取
    };
  },
  // 在其他视图中通过 $store.commit('setState', 10) 使用,用于修改stor存的值
  mutations: {
    setState(state, count) {    // 只能接受两个参数,用于修改store存的值
      state.count = count;
    },
  },
  // 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  // 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用
  actions: {
    doubleCount(context) {
      context.commit("doubleCount");
    },
  },
  // store的下级store 方便大型项目复杂数据管理,这里面相当于可以在放置一个和外面这些一样的模块
  modules: {},
});

在main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
import store from "./store"; // 添加全局存储vuex引入
// 创建VUE对象
createApp(App)
  .use(router) // 使用.use(router)添加路由router
  .use(store) // 使用.use(store)添加全局存储vuex
  .mount("#app");

配置完后就可以全局使用了

2.1、Store获取及使用

先引入vuex,再获取对象:

import { useStore } from “vuex”;
const store = useStore();

这里提供了三种方法用于获取 router 对象

<template>
  <div class="page">
    因为在setup内部没有this访问权限,不能直接使用this访问this.$router 或者
    this.$route。所有使用useRouter, useRoute来获取
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 第一种方法:获取路由对象 router 的方法1
    const vue = getCurrentInstance();
    const store1 = vue.ctx.$store;
    console.log(store1);
    // 第二种方法:获取路由对象 router 的方法2
    const store2 = useStore();
    console.log(store2);
    // 下面提供了:store 对应的属性使用大全
    // ------------------------------------------------------
    // commit(type, payload, options2) 在其他视图中使用mutations中定义的方法
    // dispatch(type, payload) 异步任务 不会改变state 在其他视图中使用actions中定义的方法
    // getters: {}  相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
    // state: (...)  store中存储的值,就是通过这个在视图中获取store存储的值
    return {};
  },
  mounted() {
    // 第三种方法:获取路由对象 store的方法3
    console.log(this.$store);
  },
};
</script>

功能快捷键

  • 撤销:Ctrl/Command + Z
  • 重做:Ctrl/Command + Y
  • 加粗:Ctrl/Command + B
  • 斜体:Ctrl/Command + I
  • 标题:Ctrl/Command + Shift + H
  • 无序列表:Ctrl/Command + Shift + U
  • 有序列表:Ctrl/Command + Shift + O
  • 检查列表:Ctrl/Command + Shift + C
  • 插入代码:Ctrl/Command + Shift + K
  • 插入链接:Ctrl/Command + Shift + L
  • 插入图片:Ctrl/Command + Shift + G
  • 查找:Ctrl/Command + F
  • 替换:Ctrl/Command + G

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现页面添加水印

    vue实现页面添加水印

    这篇文章主要为大家详细介绍了vue实现页面添加水印功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue 电商后台管理项目阶段性总结(推荐)

    Vue 电商后台管理项目阶段性总结(推荐)

    这篇文章主要介绍了Vue 电商后台管理项目阶段性总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 详解vue添加删除元素的方法

    详解vue添加删除元素的方法

    本篇文章给大家分享了vue添加删除元素的方法以及相关实例代码,有兴趣的朋友参考一下。
    2018-06-06
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • vue框架编辑接口页面下拉级联选择并绑定接口所属模块

    vue框架编辑接口页面下拉级联选择并绑定接口所属模块

    这篇文章主要为大家介绍了vue框架编辑接口页面实现下拉级联选择以及绑定接口所属模块,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Vue项目中如何引入icon图标

    Vue项目中如何引入icon图标

    这篇文章主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-03-03
  • vuex actions传递多参数的处理方法

    vuex actions传递多参数的处理方法

    今天小编就为大家分享一篇vuex actions传递多参数的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue如何下载本地静态资源static文件夹

    Vue如何下载本地静态资源static文件夹

    这篇文章主要介绍了Vue如何下载本地静态资源static文件夹,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue组件开发之用户无限添加自定义填写表单的方法

    vue组件开发之用户无限添加自定义填写表单的方法

    今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue 如何将二维数组转化为一维数组

    vue 如何将二维数组转化为一维数组

    这篇文章主要介绍了vue 如何将二维数组转化为一维数组,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论