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

In this article, the editor introduces in detail "how to use the vue global routing guard". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use the vue global routing guard" can help you solve your doubts.

The specific steps are as follows:

1. First, create a new html project and install vue-router in the project

Npm install vue-router

2.vue-router is installed and vue and vue-router are introduced into the project.

Import Vue from 'vue'

Import Router from 'vue-router'

After 3.vue and vue-router are introduced, register a route in the project using the Vue.use method

Vue.use (VueRouter)

4. After the route is registered, define the route in the project and configure it

Export default new vueRouter ({

Routes: [{

Path:'/

Component: Index

}, {

Path:'/ Detail'

Component: Detail

Meta: {

RequireLogin: 2

}

}, {

Path:'/ Center'

Component: Center

Meta: {

RequireLogin: 1

}

}]

})

5. Finally, after the routing is configured, execute the following code in the project to use the global routing guard

Import router from'. / router'

Router.beforeEach ((to, from, next) = > {

Let token = window.localStorage.getItem ('token')

If (to.meta.requireLogin & & to.meta.requireLogin = 1) {

If (token) {

Next ()

} else {

Next ('/')

}

} else if (to.meta.requireLogin & & to.meta.requireLogin = 2) {

If (token) {

Next ('/ center')

} else {

Next ()

}

} else {

Next ()

}

})

After reading this, the article "how to use vue Global routing Guard" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.