quasar 路由笔记

quasar与vue-cli相似，在这里整理一个关于quasar路由的笔记

---

一、路由配置实现页面跳转

1.quasar的文件大概如下，我的路由配置放在router目录里

2.这里我配置两个路由，首页home、登录页login，首页配置在文件static.js里，登录页配置在root.js里。

首页statics.js

export default [ // 首页 { name: 'home', path: '', component: () => import('pages/static/Index'), } ]

登录页root.js 其中children里的路由显示的是不同的登录方式，发送短信验证码登录、密码登录、二维码登录，默认显示发送验证码登录

export default[ { path: '/login', name: 'login', component: () => import('pages/login/LoginLayout.vue'), redirect: { name: 'login-sms' }, children: [ { name: 'login-sms', path: 'sms', component: () => import('pages/login/LoginBySms.vue'), }, { name: 'login-pwd', path: 'pwd', component: () => import('pages/login/LoginByPwd.vue'), }, { name: 'login-wechat', path: 'wechat', component: () => import('pages/login/LoginByWechat.vue'), } ] }, ]

3.新建一个routes.js将分散的路由整合，首页放在MainLayout里，登录页放在LoginLayout里

import root from './root.js' import statics from './statics.js' const routes = [ ...root, { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ ...statics, ], }, ] export default routes

然后在index.js里引入routes

4.跳转登录页

在登录页里切换登录方式用到<router-link/>

---

二、路由守卫

在这我的路由守卫功能就是用户登录了可以点击使用功能，没有登录点击就跳转到登录页

1.首先我新建一个页面作为需要登陆后才能访问的测试页面

2.为这个页面设置路由，我将该路由放在配置首页的文件内，新建的页面也是放在MainLayout里

这里需要为需要守卫的路由添加meta，meta里的数据可自定义

3.新建守卫文件guards.js在目录boot中，获取到requireAuth为true的话就表示访问的页面需要登录

import { simpleNotify } from 'src/utils/common' import { isEmpty } from 'lodash' const whiteList = [] // 不重定向白名单 // 全局路由未登录拦截 export default async ({ router, store }) => { router.beforeEach((to, from, next) => { if (to.meta.requireAuth && !whiteList.includes(to.path)) { console.log("进来了吗") simpleNotify({ message: '请登录' }) next({ name: 'login', query: { redirect: to.fullPath } }) } else { next() } }) }