1. Background
Before, the front-end writes the back-end return interface, and you don’t have to worry about jumping to Shenma at all. However, this time, the front-end written in vue is separated for the first time. The back-end only provides data interfaces for the front-end. At first, I thought it was the rendering of the back-end control interface. But later, I thought that the routing Shenma is controlled by the front-end, and the back-end can’t reach the hand, so I kept browsing the official website of vue-router, thinking that there should be related things, and then I found the routing meta information. At first, I didn’t understand what it meant. I slowly figured it out later and recorded it.
2. Code analysis
Official website routing meta information
(1) Routing definition
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: { requiresAuth: true }// a meta field
}
]
})
The meta field here is the routing meta information field. RequiresAuth is the field name you have set, which is used to mark whether the routing information needs to be detected. true means to be detected, false means to not need to be detected (this name is randomly available, such as my own requirementsId, or if you are too lazy to think about it, just start a , b. Of course, it is more recommended to give a meaningful name)
(2) js code
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render: h => h(App),
created () {
()
},
methods: {
redrct () {
((to, from, next) => {
if ((record => )) { //The name of the meta field here should be consistent with the route above // this route requires Id, check if logged in
// if not, redirect to login page.
if (!()) { // Your own judgment conditions next({
path: '/', // Redirected route query: { redirect: } // After logging in successfully, you can jump back to the original route according to the content in the query (page) })
} else {
next()
}
} else {
next() // Make sure to call next() }
})
},
loggedIn () {
var id = ('userId')
if (id === null) { // Not logged in return false
}
return true // Don't forget this sentence. I forgot to write it before, and I have adjusted it for a long time. }
}
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.