当前位置：首页 > wzjs >正文

网站seo关键词优化asp.net网站开发教程下载

wzjs 2025/9/21 15:11:47

网站seo关键词优化,asp.net网站开发教程下载,浏览器正能量网址,石家庄网站系统开发Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue-route 全局和局部路由拦截及应用目录全局路由拦截全局前置守卫设置全局拦截是否授权是否授权逻辑路由元信息实现授权验证登录处理创建login页面设置login路由编辑优化登录返回局部路由拦截路…

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue-route 全局和局部路由拦截及应用

全局路由拦截

全局前置守卫

设置全局拦截

是否授权

是否授权逻辑

路由元信息

实现授权验证

登录处理

创建login页面

设置login路由

编辑优化登录返回

局部路由拦截

路由独享守卫

组件内的守卫

总结

全局路由拦截

具体应用为：判断是否登录，未登录，跳转去登录；已登录，则继续执行原有请求。

全局前置守卫

你可以使用router.beforeEach注册一个全局前置守卫：

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。

每个守卫方法接收三个参数：

to: Route 即将要进入点的目标路由对象

from: Route 当前导航正要离开的路由

next: Function 一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数

设置全局拦截

在vue中设置全局前置拦截，在router/index.js路由配置设置：

to 去哪

from 从哪来

next 继续执行

是否授权

是否授权逻辑

通过全局拦截，判断是否授权逻辑。

示例如下：

不需要验证登录实现如下：

路由元信息

在路由中设置自定义的meta 字段：

实现授权验证

在router/index.js中对需要验证的路由，增加meta字段设置：

{path: '/center',name: 'center',component: Center,meta: {isLoginRequired: true}}

在router/index.js中验证meta。

示例如下：

// 全局拦截（守卫）
router.beforeEach((to, from, next) => {console.log(to)if (to.meta.isLoginRequired) {// 进行验证 本地存储中是否有tokenif (!localStorage.getItem('token')) {next('/login')}}next()
})

登录处理

创建login页面

创建LoginView.vue页面并处理登录业务处理。

示例如下：

<template><div>login<button @click="handleLogin">登录</button></div>
</template>
<script>
export default {methods: {handleLogin () {setTimeout(() => {localStorage.setItem('token', '后端返回的token字段')// this.$router.back() //返回this.$route.push('/center')}, 0)}}
}
</script>

设置login路由

在router/index.js中设置登录的路由配置。

示例如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Films from '@/views/FilmsView'
import Cinemas from '@/views/CinemasView'
import Center from '@/views/CenterView'
import NowPlaying from '@/views/films/NowPlaying'
import ComingSoon from '@/views/films/ComingSoon'
import Search from '@/views/SearchView'
import Detail from '@/views/DetailView'
import Login from '@/views/LoginView'Vue.use(VueRouter) // 注册路由插件// 配置表
const routes = [{path: '/films',name: 'films',component: Films,children: [{path: '/films/nowplaying',component: NowPlaying},{path: '/films/comingsoon',component: ComingSoon},{path: '/films',redirect: '/films/nowplaying'}]},{path: '/detail/:id', // 动态路由name: 'detail', // 命名路由component: Detail},{path: '/cinemas',name: 'cinemas',component: Cinemas},{path: '/cinemas/search',name: 'search',component: Search,meta: {isLoginRequired: true}},{path: '/center',name: 'center',component: Center,meta: {isLoginRequired: true}},{path: '/login',name: 'login',component: Login},{path: '*',component: Films}
]
......

请求搜索效果：

优化登录返回

全局拦截中设置 query；登录后，返回原有要请求路径。

示例如下：

// 全局拦截（守卫）
router.beforeEach((to, from, next) => {console.log(to)if (to.meta.isLoginRequired) {// 进行验证 本地存储中是否有tokenif (!localStorage.getItem('token')) {next({path: '/login',query: { redirect: to.fullPath }})}}next()
})

登录完成后，返回原有将要请求路径。

export default {methods: {handleLogin () {setTimeout(() => {localStorage.setItem('token', '后端返回的token字段')// this.$router.back() //返回// 获取query字段中的路由进行跳转this.$router.push(this.$route.query.redirect)}, 0)}}
}