Shulou(Shulou.com)05/31 Report--

This article mainly explains "vue3 how to use vue-router and routing rights interception", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "vue3 how to use vue-router and routing permissions interception" bar!

Use vue-router and routing permissions to block

Vue3 uses vue-router in the same way as vue2, except that it needs to be defined by some functions when initializing routing. In addition, the vue-cli tool itself can install and configure vue-router according to the prompts when creating a vue3 project, so this article is only for those partners who forget to install.

The first step must be to install: npm install vue-router@4

Then we create the router directory under the root directory src and define index.js

Here is the code for src/router/index.js

/ / 1. These two functions are introduced to initialize routing import {createRouter, createWebHashHistory} from "vue-router" / / 2. Configure routing const routes = [{path:'/ info', name: 'info', component: () = > import (' @ / pages/info'), / / routing meta-information, as you like. I usually define routing permissions in this way and then combine with route blocking. / / the auth:true below indicates that you need to log in with authorization to enter this page. Meta: {auth: true,},}, {path:'/ login', name: 'login', component: () = > import (' @ / pages/login'), meta: {auth: false,},}] / / 3. Create a routing instance const router = createRouter ({history: createWebHashHistory (), / / means to use hash mode, that is, url will have the # prefix routes}) / / 4. You can also listen for route interception, such as permission verification. Router.beforeEach ((to, from, next) = > {/ / 1. Follow next () or use routing to jump to api after each condition is executed, or the page will remain motionless / / 2. It is necessary to match conditional statements reasonably to avoid routing endless loops. Const token = cookies.get ('token') if (to.meta.auth) {if (! token) {return router.replace ({name:' login'})} next ()} else {next ()}) export default router

Next, introduce router/index.js into the project's entry file main.js

/ / main.jsimport {createApp} from 'vue'import router from' @ / router/index.js' / / introduce import App from'@ / App.vue'const app = createApp (App) app.use (router) .mount ('# app') export default app

And that's it.

Vue3 uses vue-router to explain cnpm I vue-router@next-D

Create Router object and routing configuration-- routerIndex.js

Import {createRouter, createWebHashHistory, createWebHistory} from "vue-router" / / 1. Define the routing component, note that you must use the full name of the file (including the file suffix) import countIndex from ".. / pages/count/countIndex.vue"; import langshanIndex from ".. / pages/langshan/langshanIndex.vue"; / / 2. Define routing configuration const routes = [{path: "/", redirect:'/ countIndex'}, {path: "/ countIndex", component: countIndex}, {path: "/ langshanIndex", component: langshanIndex},]; / / 3. Create a routing instance const router = createRouter ({/ / 4. Use hash mode history: createWebHashHistory (), / / adopt history mode / / history: createWebHistory (), routes, / / use the routing configuration defined above}); export default router / / export router

Router is referenced as a plug-in-main.js

Import {createApp} from 'vue'import routerIndex from'. / router/routerIndex' / / introduce the routing object instance import App from'. / App.vue'const app = createApp (App) / / use the configured routing app.use (routerIndex) app.mount ('# app'). Thank you for reading. This is the content of "how vue3 uses vue-router and routing permission interception". After the study of this article, I believe you have a deeper understanding of how vue3 uses vue-router and routing permissions to intercept, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.