Vue--启动后到加载第一个页面的过程

Posted 张三f

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue--启动后到加载第一个页面的过程相关的知识，希望对你有一定的参考价值。

地址栏http://localhost:8088/#/填写密码登录后自动跳转到http://localhost:8088/#/home/msg/workerpush

一\\ 得先跳转到login页面

  { path: \'/\',
    component: Login,
    name: \'Login\' },

二 路由拦截器

本项目没有使用路由拦截器

路由拦截器是:

router.js中
 {
          path:\'/manage\',
          name:\'manage\',
          component:manage,
          meta:{requireAuth:true}
        },

..

new Vue({
  el: \'#app\',
  data(){
    return{
      requireAuthNum:1
    }
  },
  router:router,
  store,
  components: { App },
  template: \'<App/>\',
   created () {
    router.beforeEach((to, from, next) => {
    var _this = this;
  // if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
   if(to.meta.requireAuth && _this.requireAuthNum==1){

       if(JSON.parse(localStorage.getItem("login"))==null){
          console.log(\'没有登录\')
          _this.$router.push({path: \'/\',query: {redirect: to.fullPath}})
          next()
       } else {
          _this.requireAuthNum++;
          _this.$router.push({path: to.fullPath})
          next()
        }
    }
    else {
      _this.requireAuthNum = 1;
      next();
    }
});
    
  }
})

..

localStorage.setItem("login",JSON.stringify(login));
            
                let redirect = decodeURIComponent(this.$route.query.redirect || \'/\');
              
                console.log(redirect);
                if(redirect == \'/\'){
                    _this.$router.push({path: \'/index\'});
                    console.log(\'login\');
                }else{
                    _this.$router.push({path: redirect});
                    console.log(\'重定向回去\')
                }

参考:https://www.cnblogs.com/zhengzemin/p/vueRouter_lanjie.html

路由拦截其实很简单：1）加上meta。2）router.beforeEach函数加上判断即可

三　本项目采取的策略,在home.vue的create方法中进行判断

    created() {
      // this.getTitleAndLogo()
      let authKey = Lockr.get(\'authKey\')
      let sessionId = Lockr.get(\'sessionId\')
      if (!authKey || !sessionId) {
        _g.toastMsg(\'warning\', \'您尚未登录\')
        setTimeout(() => {      //主要是这个1.5秒后跳转
          router.replace(\'/\')
        }, 1500)
        return
      }
      this.getUsername()
      let menus = Lockr.get(\'menus\')
      this.menu = this.$route.meta.menu
      this.module = this.$route.meta.module
      this.topMenu = menus
      _(menus).forEach((res) => {
        if (res.module == this.module) {
          this.menuData = res.child
          res.selected = true
        } else {
          res.selected = false
        }
      })
    },　　

五 进入login.vue 项目入口

login.vue 中
<template>
          <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" v-loading="loading" @click.native.prevent="handleSubmit2(\'form\')">登录</el-button>
      </el-form-item>
</template>

 <script>
methods:{
 handleSubmit2(form) {
        if (this.loading) return
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = !this.loading
            let data = {}
            if (this.requireVerify) {
              data.user_name = this.form.username
              data.password = this.form.password
              data.verifyCode = this.form.verifyCode
            } else {
              data.user_name = this.form.username
              data.password = this.form.password
            }
            if (this.checked) {
              data.isRemember = 1
            } else {
              data.isRemember = 0
            }
            this.apiPost(\'admin/login\', data).then((res) => {  //看这里!!!
              if (res.code != 200) {
                this.loading = !this.loading
                this.handleError(res)
              } else {
                this.refreshVerify()
                if (this.checked) {
                  Cookies.set(\'rememberPwd\', true, { expires: 1 })
                }
                this.resetCommonData(res.data)
                _g.toastMsg(\'success\', \'登录成功\')
              }
            })
          } else {
            return false
          }
        })
      },
    



}

　

this.resetCommonData(res.data)
    resetCommonData(data) {
      _(data.menusList).forEach((res, key) => {
        if (key == 0) {
          res.selected = true
        } else {
          res.selected = false
        }
      })
      Lockr.set(\'menus\', data.menusList)              // 菜单数据
      Lockr.set(\'authKey\', data.authKey)              // 权限认证
      Lockr.set(\'rememberKey\', data.rememberKey)      // 记住密码的加密字符串
      Lockr.set(\'authList\', data.authList)            // 权限节点列表
      Lockr.set(\'userInfo\', data.userInfo)            // 用户信息
      Lockr.set(\'sessionId\', data.sessionId)          // 用户sessionid
      window.axios.defaults.headers.authKey = Lockr.get(\'authKey\')
      let routerUrl = \'\'
      if (data.menusList[0].url) {
        routerUrl = data.menusList[0].url
      } else {
        routerUrl = data.menusList[0].child[0].child[0].url+"?t="+Date.parse(new Date());//这里是为了测试自己添加的
      }
      setTimeout(() => {
        let path = this.$route.path
        if (routerUrl != path) {
          router.replace(routerUrl)
        } else {
          _g.shallowRefresh(this.$route.name)
        }
      }, 1000)
    },　　

　六  点击菜单的跳转过程

leftMenu.vue
<script>
export default {
  methods: {
    routerChange(item) 	{
      //  与当前页面路由相等则刷新页面
      if (item.url != this.$route.path) {
        //router.push(item.url)
		  alert("this is at leftMenu.vue:55"+item.url);
		  router.push({path:item.url,query:{ t:Date.parse(new Date())}})
      } else {
		  alert("this is at leftMenu.vue:55"+item.url);
		 // router.push({path:item.url,query:{t:Date.parse(new Date())}})
        _g.shallowRefresh(this.$route.name) //看着
      }
    }
  }
}
</script>

..

global.js中
const commonFn = {
  j2s(obj) {
    return JSON.stringify(obj)
  },
  shallowRefresh(name) {
    router.replace({ path: \'/refresh\', query: { name: name }})
  },
...
}

　..路由routes.js

  {
    path: \'/home\',
    component: Home,
    children: [
      { path: \'/refresh\', component: refresh, name: \'refresh\' }
    ]
  },

..refresh.vue

<template>
	<div></div>
</template>
<script>
export default {
  created() {
    if (this.$route.query.name) {
      router.replace({ name: this.$route.query.name })
    } else {
      console.log(\'refresh fail\')
    }
  }
}
</script>

　这里说明:由于用到了el-munu控件,设置了使用了 index=url跳转会导致@onclick的跳转 路由判断时效

<template>
	<div>
		<el-aside :width="isCollapse?\'56px\':\'210px\'">
			<el-menu
					mode="vertical"
					unique-opened
					:collapse="isCollapse"
					:collapse-transition="false"
					:router="true"
					:default-active="activePath">
				<!-- 一级菜单 -->
				<el-submenu :index="item.id + \'\'" v-for="item in menuData" :key="item.id">
					<!-- 一级菜单的模版区域 -->
					<template slot="title">
						<!-- 图标 -->
						<i class="el-icon-chat-round"></i>
						<!-- 文本 -->
						<span style="color: #ffffff" class="menu_style">{{ item.title }}</span>
					</template>

					<!-- 二级菜单 -->
					<el-menu-item :index="subItem.url" v-for="subItem in item.child" :key="subItem.id" @click="routerChange(subItem)">
						<template slot="title">
							<!-- 图标 -->
							<i class="el-icon-chat-round"></i>
							<!-- 文本 -->
							<span>{{ subItem.title }}</span>
						</template>
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
	</div>
</template>

　..

　

  methods: {
    routerChange(item) 	{
      //  与当前页面路由相等则刷新页面
      if (item.url != this.$route.path) { //这里失效了
        //router.push(item.url)
		  alert("this is at leftMenu.vue:55"+item.url);
		  router.push({path:item.url,query:{ t:Date.parse(new Date())}})
      } else {
		  alert("this is at leftMenu.vue:55"+item.url);
		 // router.push({path:item.url,query:{t:Date.parse(new Date())}})
        _g.shallowRefresh(this.$route.name)
      }
    }
  }

七 遗留问题:为什么以后页面都是/home的子路径,包括/refesh

　

　　

　

　　

 

atzhang　

以上是关于Vue--启动后到加载第一个页面的过程的主要内容，如果未能解决你的问题，请参考以下文章

Vue 创建多页面应用模式

导航抽屉，处理后退按钮以转到以前的片段？

浏览器从输入URL后到出现页面，这个过程发生了啥？

从现有片段启动其他片段时应用程序崩溃

jQuery怎么加载一个html页面到我指定的div里面

vue3创建项目vue create project过程很慢加载不动