Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "router routing in vue3 and how to use store of vuex", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "router routing and vuex store in vue3" article.

Vue3 router routing and vuex store use 1. Routing import {useRouter, useRoute} from 'vue-router'export default {setup () {const router = useRouter () / / intra-component routing const route = useRoute () / / intra-component routing information}} 2.vuex

Create store

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

Using store within a component

Import {useStore} from 'vuex'export default {setup () {const store = useStore () const state = store.state const methods = {/ / processing commit handleMutation: () = > {store.commit (...)} / / handle the store usage of router routing and vuex in dispatch handleAction: () = > {store.dispatch (...)}} return {... methods} vue3. The basic usage of router and store in vue3 is used to get objects.

Because the this object cannot be used within the setup of vue3, all methods accessed directly through this cannot be used.

So how to access this.r o u t e r or this in vue3. What about router or this.router or this.route?

Remember one rule: basically all objects accessed through this in vue3 are obtained by useXxx instead.

For example, router, you can get router,route objects through useRouter and useRoute

1. Enterprise development Router global configuration

Global configuration in src/router/index.js in enterprise development, and add to Vue object in main.js

Import {createRouter, createWebHistory} from "vue-router"; / / routing rules const routes = [{path: "/", name: "homepage", meta: ["istabbar"], component: () = > import (".. / views/Home.vue"),},]; / / create routing const router = createRouter ({history: createWebHistory ("), routes,}) according to routing rules; export default router

Add to the Vue object in main.js

Import {createApp} from "vue"; import App from ". / App.vue"; import router from ". / router"; / / add route router introduce / / create VUE object createApp (App) .use (router) / / add route router .mount ("# app") using .use (router)

After the configuration, you can use it globally.

1.1.The acquisition and use of Router

First introduce vue-router, and then get the object:

Import {useRouter} from "vue-router"; const router = useRouter ()

But this is not the only way. The traditional and VUE3 methods are as follows:

Here are three ways to get the router object

Because there is no this access inside setup, you cannot use this to access this.$router or this.$route directly. All use useRouter, useRoute to get import {getCurrentInstance} from "vue"; import {useRouter} from "vue-router"; export default {setup () {/ / first method: method 1 const vue = getCurrentInstance (); const router1 = vue.ctx.$router; / / method 2: method 2 const router2 = useRouter () / / the method corresponding to router is provided below to use Daquan / /-- / / router1.addRoute (parentOrRoute Route) / / router1.afterEach (callback function) / / router1.back () is equivalent to go (- 1) / / router1.beforeEach (callback function) / / router1.beforeResolve (callback function) / / router1.currentRoute to get the current route: for example: {_ rawValue: {... }, _ shallow: true, _ _ v_isRef: true, _ value: {... }} / / router1.forward () is equivalent to go (1) / / router1.getRoutes: jump getRoutes () / / router1.go (delta) is equivalent to routerHistory.go (delta) jumping to the specified history / / router1.hasRoute (name) to determine whether there is a corresponding route / / router1.isReady () to determine whether the route is ready to jump / / router1.onError (callback function) when an error occurs / / router1.options to get all routing information {history: {… }, routes: Array (5)} / / router1.push (to) jumps to the page corresponding to the specified route, history / / router1.removeRoute (name) dynamically deletes a route / / router1.replace (to) jumps directly to the specified route page, there is no history / / router1.resolve (rawLocation, currentLocation) can customize the jump parameters return {} }, mounted () {/ / third method: get the routing object router method 3 console.log (this.$router);},}

1.2. acquisition and use of Route

First introduce vue-router, and then get the object:

Import {useRouter} from "vue-router"; const router = useRouter ()

But this is not the only way. The traditional and VUE3 methods are as follows:

Here are three ways to get the router object

Because there is no this access inside setup, you cannot use this to access this.$router or this.$route directly. All use useRouter, useRoute to get import {getCurrentInstance} from "vue"; import {useRoute} from "vue-router"; export default {setup () {/ / first method: method 1 const vue = getCurrentInstance (); const route1 = vue.ctx.$router.currentRoute.value; console.log (route1); / / method 2: method 2 const route2 = useRoute () Console.log (route2) / / the attributes corresponding to route are provided below. Use Daquan /-- / fullPath: "/ user" full routing path / / hash: "" Anchor part / / href: "/ User "path / / matched: [{…" }] Route matching daily rule array / / meta: {0: "istabbar"} routing additional metadata / / name: name of the "personal center" route / / params: {} additional parameters brought when the route jumps, if the object needs to be converted to the pathname part of the JSON format / / path: "/ user" encoding URL Related to routing address / / query: {} the parameter attached to the address / / redirectedFrom: undefined redirects the address before the jump, or undefined if there is no redirection. Return {};}, mounted () {/ / third method: get the routing object router method 3 console.log (this.$route);},}; 2. Enterprise development Store global configuration

Global configuration in src/store/index.js in enterprise development, and add to Vue object in main.js

Import {createStore} from "vuex"; / / create a storage object export default createStore ({/ / all the values to be stored are put here state () {return {count: 0, / / get it through $store.state.count in the view) }, / / use $store.commit ('setState', 10) in other views to modify the value of stor store mutations: {setState (state, count) {/ / can only accept two parameters, which can be used to modify the value of store store state.count = count },}, / / equivalent to the component's calculation property to get the calculated value getters: {doubleCount (state) {return state.count * 2;},}, / / the asynchronous task does not change the state to use actions through $store.dispath ('doubleCount'): {doubleCount (context) {context.commit ("doubleCount") },}, / / the subordinate store of store facilitates complex data management for large projects, which means that you can place a module like these outside modules: {},})

Add to the Vue object in main.js

Import {createApp} from "vue"; import App from ". / App.vue"; import router from ". / router"; / / add routing router to introduce import store from ". / store"; / / add global storage vuex introduce / / create VUE object createApp (App) .use (router) / / use .use (router) add route router .use (store) / / add global storage vuex .mount ("# app") using .use (store)

After the configuration, you can use it globally.

2.1.Obtainment and use of Store

First introduce vuex, and then get the object:

Import {useStore} from "vuex"; const store = useStore ()

Here are three ways to get the router object

Because there is no this access inside setup, you cannot use this to access this.$router or this.$route directly. All use useRouter, useRoute to get import {getCurrentInstance} from "vue"; import {useStore} from "vuex"; export default {setup () {/ / first method: method 1 const vue = getCurrentInstance (); const store1 = vue.ctx.$store; console.log (store1); / / second method: method 2 const store2 = useStore (); console.log (store2) / / provided below: properties corresponding to store use Daquan / /-- / / commit (type, payload, options2) in other views using the method / / dispatch defined in mutations (type) Payload) the asynchronous task does not change state's use of the method defined in actions in other views / / getters: {} is equivalent to the component's calculation property obtaining the calculated value / / state: (...) through $store.getters.doubleCount. The value stored in store is used to get the value stored by store in the view return {};}, mounted () {/ / the third method: method 3 console.log (this.$store) to get the routing object store;},}; function shortcut key

Undo: Ctrl/Command + Z

Redo: Ctrl/Command + Y

Bold: Ctrl/Command + B

Italics: Ctrl/Command + I

Title: Ctrl/Command + Shift + H

Unordered list: Ctrl/Command + Shift + U

Ordered list: Ctrl/Command + Shift + O

Checklist: Ctrl/Command + Shift + C

Insert code: Ctrl/Command + Shift + K

Insert link: Ctrl/Command + Shift + L

Insert picture: Ctrl/Command + Shift + G

Find: Ctrl/Command + F

Replace: Ctrl/Command + G

The above is about the content of this article on "router routing in vue3 and how to use store in vuex". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.