vue router的 index.js设置
2023-09-27 14:26:02 时间
import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../pages/login/index'
import Main from '../pages'
import Register from '../pages/register/register'
import noFound from '../components/404'
import noPerm from '../components/403'
import personalInfo from '../pages/personalInfo/personalInfo'
// children
import baseInfo from '../pages/personalInfo/baseInfo/baseInfo'
import stuChange from '../pages/personalInfo/stuChange/stuChange'
import teacher from '../teacher'
import teacherHome from '../teacher/home'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: login,
meta: {
title: '登录页'
},
},
{
path: '/register',
component: Register,
meta: {
title: '注册页'
}
},
{
path: '/403',
component: noPerm
},
{
path: '/',
name: 'index',
component: Main,
meta: {
title: '首页',
// perm: true //设置权限(测试)
},
children: [
// 个人信息
{
path: '/personalInfo',
name: 'personalInfo',
component: personalInfo,
meta: {
title: '个人信息'
}
},
{
path: '/personalInfo/stuChange/:id?',
name: 'stuChange',
component: stuChange,
meta: {
title: ''
}
},
{
path: '/employService',
name: 'employService',
meta: {
perm: true //设置权限(测试)
},
component: employService
},
]
},
{
path: '/teacher',
name: 'teacher',
component: teacher,
meta: {
title: '主页'
},
children: [{
path: '/teacherHome',
name: 'teacherHome',
component: teacherHome,
meta: {
title: '首页'
},
},
// 匹配不存在的路径页面
{
path: '*',
component: noFound
// 重定向
// redirect: '/'
// redirect: {
// path: '/'
// }
// 动态设置重定向的目标,to目标路由对象,就是访问的路径的路由信息
// redirect:(to)=>{
// // if(to.path == '/123'){
// // return '/'
// // }else if(to.path == '456'){
// // return { path: '/first' }
// // }else {
// // return { name: 'index' }
// // }
// return '/'
// }
},
]
}
]
const router = new VueRouter({
routes,
mode: 'history',
// linkActiveClass: 'is-active',//当前激活的路由的class名字
scrollBehavior(to, from, savePotion) {
if (savePotion) {
return savePotion
} else {
return {
x: 0,
y: 0
}
}
}
})
// meta里可以定义一些自己想要的数据
// 测试权限
// 进入导航之前的钩子
// 写上next()路由才会跳转
// 可以拦截登录,如果meta里配置了需要登录,则重定向到'/login'页面
router.beforeEach((to, from, next) => {
if (to.meta.perm) {
// next('/403')
next('/login')
} else {
next()
}
})
export default router
相关文章
- Methods, Computed, and Watchers in Vue.js
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】基本结构
- 【Vue/Js】如何解决谷歌浏览器(chrome)扩展插件安装后,再打开自动消失问题(两种解决方案)
- 【Vue】通过v-for循环在html元素中渲染应用(图文+完整示例)
- 如何在vue项目中使用svg图标
- Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,Vue.js Nuxt.js 通用公众号页面解决方案(超级详细教程)
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- Vue指令 - v-bind(:)
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- Vue + Flask 实现单页面应用
- Vue全局事件任意组件间通信
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- vue.js 嵌套循环渲染
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
- vue解决点击不同按钮,回显数据时相同的问题
- vue实战入门后台篇六:springboot+mybatis实现网站后台-前端登录功能对接
- asp.net mvc + vue.js + axios.js
- vue中封装一个全局的弹窗js
- vue中给请求到的数据对象加属性问题
- [js高手之路] vue系列教程 - 事件专题(4)
- npm安装vue-cli报错internal/modules/cjs/loader.js(Error: Cannot find module 'D:Programnodejsnode_globalnode_modulesvue-clibinvue')
- 浅析vue mixins/extends传入参数方法
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- ElasticSearch Suggest Completion 智能补全技术 整合SpringBoot+Vue实现
- vue.js 样式绑定
- 最有用的16 个 Vue UI库
- 解决Vue前后端跨域问题的多种方式
- vue:pdf.js使用细节/隐藏按钮/设置、获取当前页码/记录阅读进度/切换语言(国际化)