目的
我们经常遇到这种情况,未登录就查看帖子去了,想评论时提示登录,但是登录成功之后它给我返回首页了
这就很难受,我想要回到原本的那个页面。
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
分析
思路是这样的:
进入login页面之前,记录下来时的路径,存储到一个地方。登录成功之后,取出这个路径,跳转到该页面,就实现了登录后返回原本页面。
会遇到几个问题:
1.怎么获取到来时的路径?
可以在每次跳转到login页面之前获取到这个路径,但是login页面的入口太多,如果到每个页面加就太麻烦。
这时候我们用到一个东西 路由守卫。
有个beforeeach方法,每次路由变化都会执行它,这个方法有一个from属性,这就是我们想要的路径
2.这个路径存储到哪里?
明确下,我们存进去之后还要取出来,而且不是在一个页面上,相当于要一个全局的存储。
我们选择用vuex来存储。
store/state.js 在这里,我们初始化一个变量用于存储来时的路径
/*
存放各种需要共用的属性
*/
export default {
lastUrl:'',//记录上一次请求的url,用于登录后返回
}
actions.js 这里写一个方法,用于调用mutation并把路径传入
/*
通过操作mutations来操作state
*/
export default {
/**
* 设置最后一次的url
* @param context
* @param value
*/
setLastUrl(context,value) {
//commit
context.commit('SET_LAST_URL',value)
},
}
mutations.js 写一个方法,用于给 lastUrl 属性进行赋值操作
/*
直接操作state的地方
*/
export default {
SET_LAST_URL(state,value){
//修改state
state.lastUrl=value
}
}
到router/index.js下,添加路由守卫
我们修改route文件如下:
//该文件用于创建整个应用的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //vue-router本身是一个插件,需要注册
import store from '../store/index' //这里是引入vuex
import Home from "../pages/Home/Home";
import ArticleDetail from "../pages/ArticleDetail/ArticleDetail";
import Login from "../pages/Login/Login";
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
meta:{
showHeader:true
}
},
{
path: '/detail',
component: ArticleDetail,
meta:{
showHeader:true
}
},
{
path:'/login',
component:Login
}
]
})
//初始化时调用一次
//然后,在每一次切换路由之前,执行一次这个方法
//全局前置路由守卫
router.beforeEach((to, from, next) => {
//接收三个参数
//to 去哪,下一个路由的路径,名字,参数等等
//from 从哪来
//next 下一步
//到login页面之前,记录下之前的路径
if (to.path=='/login'){
//调用 action中的setLastUrl方法,把来时的路径存入
store.dispatch('setLastUrl',from.fullPath)
}
next()
})
//创建并暴露一个路由器
export default router
这样存储就完成了。
登录成功后跳转
首先在 Login.vue中引入vuex的几个工具
import {mapState} from 'vuex'
在计算属性中使用
computed:{
...mapState(['lastUrl'])
},
然后就可以直接读取state中的 lastUrl属性了。
到methods中的login方法,判断登录成功之后,进行路由跳转
this.$router.replace(this.lastUrl)
这样就实现了