router路由推断页面未登6跳转到登陆页面,登入后跳转到登六前的页面

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if (token) {  // 判断当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
});

要求
页面签到页面:和讯登录
1、页面有背景图
贰、有七个登入表单(用户名,密码,登陆开关,注册按键)
三、点击登陆开关跳转到学生消息表页面
四、点击注册开关跳转的挂号页面
(仿微博信箱注册页面,点击注册跳转到学生音信表页面)

兑现这一个成效,须要记住登陆前的页面地址,能够把那么些地点记录在session中,也得以把这么些地点作为参数字传送给登入页面,还是能在原来的页面弹出一个层,在那么些层里写出登入页面。那里大家介绍第两种格局,也就登入页面单独写,把登陆前的页面地址作为参数字传送递给登⑥页面。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if (token) {  // 判断当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
});

  

stuTable.html
学员消息表页面:
一、唯有3个表格,题目是学员消息表
表头为:姓名、性别、年龄、生日、查看详细情形
贰、点击查阅详细情况跳转到类似简历的页面包车型地铁钦定学生地方

在登6在此以前的页面,点击登录的时候,大家先得到当前页面包车型客车地方,然后举办编码,放到登入页面后边作为参数。

  

在那从前是给路由加1个meta属性:

stuInfo.html
router路由推断页面未登6跳转到登陆页面,登入后跳转到登六前的页面。学生详细的情况页面:
一、将具备学生新闻放到那么些页面
二、顺序排泄,学生消息展示方式自定义,要有头像
(能够是表格,也足以标题段落)
三、学生音信支撑下载

以身作则代码如下

在这前边是给路由加二个meta属性:

{
    path: '/index',
    meta: {
      title: '',
      requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录的
    },
}

var url=location.href;

{
    path: '/index',
    meta: {
      title: '',
      requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录的
    },
}

 

 

var paraString=encodeURIComponent(url);

 

留神:不过实际是登6的时候大大多时候并不开展跳转,所以那里须要在login跳转的门路中再加壹段:

第壹用<table>表格做登6面包车型客车布局,

澳门葡京 ,$(“#signin-login”).html(“<a
href=’../home/login.html?paraString=”+paraString
+”‘>登录</a>”);

专注:然则实际是登陆的时候大大多时候并不开始展览跳转,所以这里需求在login跳转的门路中再加一段:

if(this.$route.query.redirect){
//     let redirect = decodeURIComponent(this.$route.query.redirect);
       let redirect = this.$route.query.redirect;
       this.$router.push(redirect);
}else{
       this.$router.push('/');
 }
<body>
<form action="xinxibiao.html" method="post"><!--提交到xinxibiao页面-->
    <center>
    <table border="0" cellpadding="1" cellspacing="2" bgcolor="#CCFFFF" width="30%">
        <tr> 
            <td rowspan="6">     </td>
            <td><h2>登录博客园 - 代码改变世界</h2></td>

        </tr>
        <tr>
            <td>登入用户名<br /><input type="text" name="yonghu" value="" /></td>

        </tr>
        <tr>
            <td>密码<br /><input type="password" name="mima" value="" /></td>

        </tr>
        <tr>
            <td><input type="radio" name="xuanze" value="" />下次自动登录</td>

        </tr>
        <tr>
            <td><input type="submit" name="dengru" value="     登入    " /></td><!--button怎么设置 --><!--设置提交按钮,form设置提交到xinxibiao页面,实现页面的跳转-->

        </tr>
        <tr>
            <td><a href="zhuce.html">》立即注册</a><br /><a href="">》反馈问题</a></td>

        </tr>
        <tr height="10"></tr>
    </table>
    </center>
</form>
</body>

在跳转到login.html?paraString=xxxx之后,先收取paraString参数的值,也正是登陆前的页面地址,然后,在证实用户名、密码等经过之后,让页面跳转到paraString指向的页面地址。

if(this.$route.query.redirect){
//     let redirect = decodeURIComponent(this.$route.query.redirect);
       let redirect = this.$route.query.redirect;
       this.$router.push(redirect);
}else{
       this.$router.push('/');
 }

 

 新建学生消息表的页面xinxibiao.html 

取出paraString参数

 

 

(function($) {

<body>
<center><!--整体居中-->

<table border="1" cellspacing="0" width="50%">
    <caption>学生信息表</caption><!--表头信息-->
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>生日</th>
        <th>查看详情</th>
    </tr>
    <tr>
        <td>李一</td>
        <td>男</td>
        <td>17</td>
        <td>01.22</td>
        <td><a href="xiangqing.html#liyi">查看详情</a></td><!--连接标签跳转到详情页面,设置id实现指定的跳转-->
    </tr>
    <tr>
        <td>王二</td>
        <td>女</td>
        <td>18</td>
        <td>02.22</td>
        <td><a href="xiangqing.html#wanger">查看详情</a></td>
    </tr>
    <tr>
        <td>张三</td>
        <td>女</td>
        <td>15</td>
        <td>03.14</td>
        <td><a href="xiangqing.html#zhangsan">查看详情</a></td>
    </tr>
    <tr>
        <td>大四</td>
        <td>男</td>
        <td>78</td>
        <td>05.27</td>
        <td><a href="xiangqing.html#dasi">查看详情</a></td>
    </tr>
</table>

         $.getUrlParam = function(name) {

  通过table表格做详细情形页面

                   var reg = new RegExp(“(^|&)” + name +
“=([^&]*)(&|$)”);

<body>
<center><!--整体居中-->
<table border="1" cellspacing="0" width="50%">
    <caption>个人简历</caption><!--表头信息-->
    <tr height="50">
        <td>姓名</td>
        <td align="center" id="liyi">李一</td><!--align居中--><!--id设置和xinxibiao.html的<form>id一致-->
        <td>性别</td>
        <td align="right">男</td>
        <td rowspan="5" ><img src="image/liyi.jpg" width="100%"></td><!--rowspan垂直方向合并-->
    </tr>
    <tr>
        <td>民族</td>
        <td>汉</td>
        <td>籍贯</td>
        <td>山东淄博</td>

    </tr>
    <tr>
        <td>出生年月</td>
        <td>900705</td>
        <td>政治面貌</td>
        <td>党员</td>

    </tr>
    <tr>
        <td>学历</td>
        <td>本科</td>
        <td>婚姻状况</td>
        <td>未婚</td>

    </tr>
    <tr>
        <td>专业</td>
        <td>油气储存</td>
        <td>健康状况</td>
        <td>很健康</td>

    </tr>

    <tr>
        <td bgcolor="#66FFFF">求职意向</td>
        <td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
    </tr>
    <tr>
        <td>毕业院校</td>
        <td>辽宁石油化工大学</td>
        <td>qq</td>
        <td colspan="2">862581421</td>
    </tr>
    <tr>
        <td>联系电话</td>
        <td>15242747377</td>
        <td>邮箱</td>
        <td colspan="2">862581421@qq.com</td>
    </tr>
    <tr>
        <td>主修课程</td>
        <td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
    </tr>
    <tr height="60">
        <td>个人技能</td>
        <td colspan="4">适应力超级强,无论何时都不会放弃治疗</td>
    </tr>

</table>

<a href="ziliao/liyi.doc"><h3>下载资料</h3></a><a标签指定到文件实现下载效果>

<table border="1" cellspacing="0" width="50%">
    <caption>个人简历</caption><!--表头信息-->
    <tr height="50">
        <td>姓名</td>
        <td align="center" id="wanger">王二</td><!--align居中-->
        <td>性别</td>
        <td align="right">女</td>
        <td rowspan="5" ><img src="image/wanger.jpg" width="100%"></td><!--rowspan垂直方向合并-->
    </tr>
    <tr>
        <td>民族</td>
        <td>汉</td>
        <td>籍贯</td>
        <td>山东潍坊</td>

    </tr>
    <tr>
        <td>出生年月</td>
        <td>900705</td>
        <td>政治面貌</td>
        <td>党员</td>

    </tr>
    <tr>
        <td>学历</td>
        <td>本科</td>
        <td>婚姻状况</td>
        <td>未婚</td>

    </tr>
    <tr>
        <td>专业</td>
        <td>油气储存</td>
        <td>健康状况</td>
        <td>很健康</td>

    </tr>

    <tr>
        <td bgcolor="#66FFFF">求职意向</td>
        <td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
    </tr>
    <tr>
        <td>毕业院校</td>
        <td>辽宁石油化工大学</td>
        <td>qq</td>
        <td colspan="2">862581421</td>
    </tr>
    <tr>
        <td>联系电话</td>
        <td>15242735477</td>
        <td>邮箱</td>
        <td colspan="2">862581421@qq.com</td>
    </tr>
    <tr>
        <td>主修课程</td>
        <td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
    </tr>
    <tr height="60">
        <td>个人技能</td>
        <td colspan="4">适应力超级强,无论何时都不会放弃治疗</td>
    </tr>

</table>

<a href="ziliao/wanger.doc"><h3>下载资料</h3></a>


<table border="1" cellspacing="0" width="50%">
    <caption>个人简历</caption><!--表头信息-->
    <tr height="50">
        <td>姓名</td>
        <td align="center" id="zhangsan">张三</td><!--align居中-->
        <td>性别</td>
        <td align="right">女</td>
        <td rowspan="5" ><img src="image/zhangsan.jpg" width="100%"></td><!--rowspan垂直方向合并-->
    </tr>
    <tr>
        <td>民族</td>
        <td>汉</td>
        <td>籍贯</td>
        <td>山东潍坊</td>

    </tr>
    <tr>
        <td>出生年月</td>
        <td>900705</td>
        <td>政治面貌</td>
        <td>党员</td>

    </tr>
    <tr>
        <td>学历</td>
        <td>本科</td>
        <td>婚姻状况</td>
        <td>未婚</td>

    </tr>
    <tr>
        <td>专业</td>
        <td>油气储存</td>
        <td>健康状况</td>
        <td>很健康</td>

    </tr>

    <tr>
        <td bgcolor="#66FFFF">求职意向</td>
        <td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
    </tr>
    <tr>
        <td>毕业院校</td>
        <td>辽宁石油化工大学</td>
        <td>qq</td>
        <td colspan="2">862581421</td>
    </tr>
    <tr>
        <td>联系电话</td>
        <td>15242735477</td>
        <td>邮箱</td>
        <td colspan="2">862581421@qq.com</td>
    </tr>
    <tr>
        <td>主修课程</td>
        <td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
    </tr>
    <tr height="60">
        <td>个人技能</td>
        <td colspan="4">适应力超级强</td>
    </tr>

</table>
<a href="ziliao/zhangsan.doc"><h3>下载资料</h3></a>
<table border="1" cellspacing="0" width="50%">
    <caption>个人简历</caption><!--表头信息-->
    <tr height="50">
        <td>姓名</td>
        <td align="center" id="dasi">大四</td><!--align居中-->
        <td>性别</td>
        <td align="right">男</td>
        <td rowspan="5" ><img src="image/dasi.jpg" width="100%"></td><!--rowspan垂直方向合并-->
    </tr>
    <tr>
        <td>民族</td>
        <td>汉</td>
        <td>籍贯</td>
        <td>山东潍坊</td>

    </tr>
    <tr>
        <td>出生年月</td>
        <td>900705</td>
        <td>政治面貌</td>
        <td>党员</td>

    </tr>
    <tr>
        <td>学历</td>
        <td>本科</td>
        <td>婚姻状况</td>
        <td>未婚</td>

    </tr>
    <tr>
        <td>专业</td>
        <td>油气储存</td>
        <td>健康状况</td>
        <td>很健康</td>

    </tr>

    <tr>
        <td bgcolor="#66FFFF">求职意向</td>
        <td colspan="4" bgcolor="#FFFF00" align="center">一切高薪的工作都是所爱的</td><!--水平方向-->
    </tr>
    <tr>
        <td>毕业院校</td>
        <td>辽宁石油化工大学</td>
        <td>qq</td>
        <td colspan="2">862581421</td>
    </tr>
    <tr>
        <td>联系电话</td>
        <td>15242735477</td>
        <td>邮箱</td>
        <td colspan="2">862581421@qq.com</td>
    </tr>
    <tr>
        <td>主修课程</td>
        <td colspan="4">阿拉伯语,油气运输,国际贸易,力资源</td>
    </tr>
    <tr height="60">
        <td>个人技能</td>
        <td colspan="4">适应力超级强</td>
    </tr>

</table>

<a href="ziliao/dasi.doc"><h3>下载资料</h3></a>


</center>
</body>

                   var r = window.location.search.substr(1).match(reg);

  注册页面,一样用table

                   if(r != null) return unescape(r[2]);

<center>
<form action="xinxibiao.html" method="post">
<table   border="0" cellpadding="2" cellspacing="2" width="60%">
    <tr>
        <td><h4>注册新用户</h4></td>
        <td> </td>
    </tr>
    <tr>
        <td></td>
        <td rowspan="7"><img src="image/zhuce.jpg" /></td>
    </tr>
    <tr>
        <td >邮     箱<input type="text" name="" value="" /></td>
    </tr>
    <tr>
        <td>手机号码 <input type="text" name="" value="" /></td>
    </tr>
    <tr>
        <td>登入账号 <input type="text" name="" value="" /></td>
    </tr>
    <tr>
        <td>显示名称 <input type="text" name="" value="" /></td>
    </tr>
    <tr>
        <td>密     码<input type="password" name="" value="" /></td>
    </tr>
    <tr>
        <td>确认密码 <input type="password" name="" value="" /></td>
    </tr>
    <tr height="50"></tr>
    <tr>
        <td >                              <input type="submit" name="" value="注册" /></td>
    </tr>
    <tr>
        <td colspan="2" >*点击 “注册” 按钮,即表示您同意并愿意遵守 用户协议。 </td>
    </tr>
</table>
</form>
</center>

                   return null;

  

         }

 

})(jQuery); //通过jquery获取url参数

var paraString=$.getUrlParam(paraString);

证实通过后的跳转(要是取不到参数,则跳转到私下认可页面,一般是首页)

                                                       
if(paraString==null||paraString==””){

                                                                
document.location=”../index.html”;

                                                        }else{

                                                                
document.location = paraString;

                                                        }

其他二种方法,大家能够查资料尝试。

参考资料:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website