zoukankan      html  css  js  c++  java
  • vue路由

    vue使用redired对路由重定向:

    {
        path: '*',
        redirect: {
          name: 'login'
        }
    }
    设置根目录
    {
        path: "/",
        name: 'login',
        component: login,
      }
    设置地址栏地址正常显示:添加mode: 'history',
    设置页面是否登录,登录后正常跳转,未登录跳转至指定页(登录页)
    在需要过滤的页面添加mate>auth,不需要过滤页面不用添加。
    export default new Router({
      mode: 'history',
      routes: [{
        path: "/",
        name: 'login',
        component: login,
      }, {
        path: '/HelloWorld',
        name: 'HelloWorld',
        component: HelloWorld,
        meta: {
          auth: true
        }]
    })
    在main.js中添加router.beforeach守卫
    router.beforeEach((to, from, next) => {
      if (to.matched.some(m => m.meta.auth)) {
        // 对路由进行验证    
        var  token=sessionStorage.getItem("token");
        if (token) { // 已经登陆       
          next() // 正常跳转到你设置好的页面     
        } else {
          // 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
          next({
            name: 'login',
            query: {
              Rurl: to.fullPath
            }
          })
        }
      } else {
        next()
      }
    })
     
    可以在登录的时候存入session,在访问页面进行验证。记得设置next(),
  • 相关阅读:
    js中replace的正则替换
    ios沙盒路径
    Android开源框架
    小知识点
    __NSCFConstantString && __NSPlaceholderDictionary
    iq 格式分析
    C 函数
    Xcode报错
    XMPP Server
    H5网站借鉴
  • 原文地址:https://www.cnblogs.com/yeyuqian/p/13992542.html
Copyright © 2011-2022 走看看