精华内容
下载资源
问答
  • 最近写用户登录,网上很多办法是在route的query保存上个页面的url,然后登录后再跳转到这个页面。但是如果我跳转的页面有很多的参数也在query里,这样就不好操作了。下面我先附上用户未登录跳转登录页的方法。请求我...

    最近写用户登录,网上很多办法是在route的query保存上个页面的url,然后登录后再跳转到这个页面。但是如果我跳转的页面有很多的参数也在query里,这样就不好操作了。下面我先附上用户未登录跳转登录页的方法。

    请求我用的是axios。如果方便点,我们可以用axios的全局配置,来拦截请求回来的数据,当请求回来的状态码不是成功的时候,跳转登录页 ,我们公司1001是错误的状态,这个根据自己公司来定。


    如果有的小伙伴不会全局配置axios的话可以看一下文档,不会也没关系,就是麻烦点,在每个需要跳转登录页的页面都写上,像这样:


    在页面的methods方法里面调用接口,然后判断请求回来的状态。/login是我的登录页面的路径,如果你的登录页是别的名字,你写自己的路径。

    跳转的登录页后,登录成功返回上一个页面

    在登录页中,判断如果登录成功,写上这句话


    返回上个页面,go(-2)返回上上个页面,go(0)是刷新当前页面。这样写就没有什么问题啦,但是有一种情况,登录页是朋友分享过来的。那我之前在百度页面打开的这个链接,登录后就跳转到了百度,这样是不行的。虽然没有直接显示登录页的页面,但是这种情况也得考虑。

    我的思路是判断上个页面的域名是不是和登录页的域名一样,也就是说判断是不是你的项目,如果不是就跳转到首页

    只需要在跳转登录页的时候把域名传到router的query里面,你自己随便起个名字,像这样


    location.hostname不知道的可以百度一下。

    不是全局配置的小伙伴在当前页面这样写:


    这样在登录页就拿到了上个页面的location.hostname了。然后在登录页判断一下


    这样就好啦,如果哪里有不足可以和我交流

    展开全文
  • 前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,...传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。 写
  • router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录 思路 首先,我们要把当前的这个路径保存起来,然后在下一步,用户需要登录的时候,直接用这个路由跳转到这个...

    router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称
    router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录

    思路

    首先,我们要把当前的这个路径保存起来,然后在下一步,用户需要登录的时候,直接用这个路由跳转到这个当前的路由就可以。

    main.js

    router.beforeEach((to, from, next) => {
        if (to.path == '/login') {
        	//保存当前路由
            localStorage.setItem("preRoute", router.currentRoute.fullPath)
        }
        next()
    })

    登录界面 login.vue

    this.$store.dispatch("Login", this.loginForm).then(response => {
    	if (response.code == 200) {
    		const curr = localStorage.getItem('preRoute')
    		if (curr == null) {
    			this.$router.push({ path: "/user_center" });
    		} else {
    			this.$router.push({ path: curr });
    		}
    		this.$message({ message: response.msg, type: "success", "duration": 1000 });
    	} else {
    		this.$message.error(response.msg);
    	}
    }).catch((response) => {
    	this.$message.error('请联系管理员!!!');
    });

    快捷方法

    this.$router.go(-1);//上一个

     

    展开全文
  • app.vue<template><div id="app"><login></login><router-view/></div></template><script>import login from "./components/login/login.vue"export default {nam...

    app.vue

    <template>

    <div id="app">

    <login></login>

    <router-view/>

    </div>

    </template>

    <script>

    import login from "./components/login/login.vue"

    export default {

    name: 'App',

    components:{

    login

    }

    }

    </script>

    login.vue

    <template>

    <div class="login">

    <form action="">

    <input type="text" placeholder="请输入用户名/邮箱/手机号"><br>

    <input type="password" placeholder="请输入密码">

    <router-link :to="{name:'Tabbar'}"><input type="button" value="登陆" class="btn"/>                           </router-link>

    </form>

    </div>

    </template>

    tabbar.vue

    <template>

    <div class="tabbar">

    <child @back="getValue" mark="home" :sel="select" title="首页">

    <img src="../assets/ic_tab_home_normal.png" slot="active"/>

    <img src="../assets/ic_tab_home_active.png" slot="normal"/>

    </child>

    <child @back="getValue" mark="team" :sel="select" title="团队">

    <img src="../assets/ic_tab_subject_normal.png" slot="active"/>

    <img src="../assets/ic_tab_subject_active.png" slot="normal"/>

    </child>

    <child @back="getValue" mark="salary" :sel="select" title="佣金">

    <img src="../assets/ic_tab_status_normal.png" slot="active"/>

    <img src="../assets/ic_tab_status_active.png" slot="normal"/>

    </child>

    <child @back="getValue" mark="check" :sel="select" title="考核">

    <img src="../assets/ic_tab_group_normal.png" slot="active"/>

    <img src="../assets/ic_tab_group_active.png" slot="normal"/>

    </child>

    <child @back="getValue" mark="personal" :sel="select" title="我的">

    <img src="../assets/ic_tab_profile_female_normal.png" slot="active"/>

    <img src="../assets/ic_tab_profile_female_active.png" slot="normal"/>

    </child>

    </div>

    </template>

    <script>

    import child from "./child"

    export default {

    components: {

    child

    },

    data: function () {

    return {select: "home"}

    },

    methods: {

    getValue: function (n) {

    this.select = n;

    }

    }

    }

    </script>

    index.js

    import Vue from 'vue'

    import Router from 'vue-router'

    import Tabbar from '@/components/tabbar'

    import Home from '@/components/home/home'

    import Classify from '@/components/classify/classify'

    import Team from '@/components/team/team'

    import Salary from '@/components/salary/salary'

    import Check from '@/components/check/check'

    import Personal from '@/components/personal/personal'

    Vue.use(Router);

    export default new Router({

    mode: 'history',

    routes: [

    {

    path: '/tabbar',

    name: 'Tabbar',

    component: Tabbar,

    },

    {

    path: '/home',

    name: 'Home',

    component: Home,

    },{

    path: '/salary',

    name: 'Salary',

    component: Salary,

    redirect: {name: 'TermSearch'},

    children:[

    {path:"termSearch",name: 'TermSearch',component:TermSearch},

    {path:"termAnalyse",name: 'TermAnalyse',component:TermAnalyse}

    ]

    },

    {

    path: '/check',

    name: 'Check',

    component: Check,

    redirect: {name: 'PersonWarn'},

    children:[

    {path:"personWarn",name: 'PersonWarn',component:PersonWarn},

    {path:"teamWarn",name: 'TeamWarn',component:TeamWarn}

    ]

    },

    {

    path: '/personal',

    name: 'Personal',

    component: Personal

    },

    ]

    })

    68dd5ee2685a5d28059da86f6311579d.png

    点击登陆后跳转到首页

    4d28f6fa2afb7c4f7b00430d3fa2e48c.png

    这是点击登陆后的效果,路由跳转到tabbar,login页面却还在,首页页面也没显示;

    点击首页,home页面显示,tabbar又不显示了

    是不是登录页面不能在app.vue里指定

    求大佬指点

    展开全文
  • 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的...

    1
    {
    path: ‘/home’,
    name: ‘首页’,
    meta:{
    requireAuth: true //需要验证的加上这个字段
    },
    component: () => import(’…/views/index.vue’)
    },
    2.

    /**

    • 未登录则跳转到登录页
    • 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象
    • 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识位,如本项目中的requireAuth字段
      */
      if (to.matched.some((auth) => auth.meta.requireAuth)) {
      let token = sessionStorage.getItem(“token”);
      if (token) {
      next();
      } else {
      next({
      path: “/login”
      });
      }
      } else {
      next();
      }
      })
      3.
      login(this.ruleForm)
      .then(res => {
      if (res.code == 200) {
      sessionStorage.setItem(‘token’, ‘token’);
      this.KaTeX parse error: Expected 'EOF', got '}' at position 42: … }̲ …alert(error.msg);
      });
    展开全文
  • 环境:vue 2.9.3; webpack;vue-router目的:实现未登录跳转例子:直接在url地址栏输入...../home,但是...图示:1、直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数。...
  • Vue 跳转到指定页面,返回到上一

    千次阅读 2020-12-23 12:25:09
    跳转到下一页=======htmlicon="comment-circle"is-link@click="goToPage('fankui')"/>=======JSexport default {data() {return{methods: {//不带参数的goToPage(name) {// alert("1");this.$router.push({name})...
  • 实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对...
  • Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
  • vue页面跳转拦截器

    2020-12-20 11:02:41
    登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问...import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = [{path: ...
  • 有一些问题不限于 Vue,还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢?就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的。...
  • 项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例。操作代码为:...
  • import Vue from "vue"; import Router from "vue-router"; import routes from "./routes"; // 配置的路径 Vue.use(Router); const router = new Router({ routes, scrollBehavior // mode: 'history' }); ...
  • requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 ...
  • 一、this.$router.push()1、vue点击跳转42、script//跳转前页面传参数:goTo(item) {//storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面let storageData = {searchWords: this....
  • ①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态; sessionStorage.setItem("flag", 1); ② 添加路由守卫 方法一: 直接在路由中添加 const router = new VueRouter({ ... }) // 路由守卫 ...
  • beforeEach、afterEach单个的路由钩子函数:beforeEnter组件内的路由钩子函数:beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate模块一:全局导航钩子函数1、vue router.beforeEach(全局前置守卫)before...
  • VUE实现页面A传参跳转,同时页面B根据传来的参数执行搜索方法 1.页面A点击查看按钮,获取所需参数并实现页面跳转,带参数。 methods: { check(selectTable) { this.$router.push({ path: “/member”, query: { ...
  • vue项目如何点击跳转到第三方页面

    千次阅读 2021-08-11 13:45:19
    大家都知道传统的跳转路由就是点击后通过this.$router.push()来跳转。但是需要跳转第三方链接除了用a标签之外,如果需要在点击事件内完成跳转怎么做呢。 很简单,用window.location.herf就可以了 注意:网址前面要加...
  • 本教程操作环境:windows7系统、vue2.9版,该方法适用于所有品牌电脑。vue跳转页面的方法1:router-link跳转点击跳转2点击跳转1点击跳转32:this.$router.push()点击跳转4export default{name:'test',methods:{goTo...
  • //控制登录 验证才能进入页面 router.beforeEach((to,from,next)=>{ if(to.meta.login){ //判断 用户是否登录 用户名密码 if(localStorage.getItem("user13")){ next(); }else{ router.push("/login"); } }else{ ...
  • 在logout函数中,添加以下代码: // redirect后面跟固定的路由,这样每次退出登录后都会跳转到相同的页面。 this.$router.push('/login?redirect=/auth/authCenter');
  • vue文件实现跳转页面的方法:vue文件之间的跳转,常常通过【】实现,代码为【demo2】。本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。vue文件实现跳转页面的方法:vue在使用的过程中, vue...
  • vue关闭当前页面 跳转_vue常见面试题

    千次阅读 2020-11-19 23:08:33
    1.vue优点? 答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,在数据操作方面...
  • 占位符绑定key值
  • 最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,...解决需求:需要在展示里调用顶部导航栏里的方法,两者之间没有引用关系,根据vue的API发现可以用下面方法实现。 方法描述:实现页面.
  • Vue组件显示与页面跳转

    千次阅读 2020-12-19 14:44:25
    最近在学习vue框架,从网上找了一个实例但是只有一个页面,就是所有组件都放App.vue里,结果点击按钮,所有内容都显示在当前页面,但是我想实现页面的跳转,搞了好几天,终于在网上找到了一个例子。下面贴出在一个...
  • 页面A的场景问题[20190828更新]适配vue-router 3.1.x[20190730更新]添加了获取stack的方法,在Vue原型上,只需要在页面`this.$pageStack.getStack();`由于重度使用了 Vue 全家桶在 web App、公众号和原生 Hyb...
  • 说明开始1.先看一下目前home.vue的效果图 首先...跳转函数那我们先写点击后的跳转函数,在methods中写函数gologin(函数都写在methods中,计算函数写在computed中)methods:{//函数gologin:function(){}}这我有点挠...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,079
精华内容 7,231
关键字:

vue控制跳转到登录页

vue 订阅