简单记录一下vue的路由的编写
1、首先看下图:
我的整个页面分为三部分,上部的title,侧面的导航,和右边的main页面。当侧面导航变化时,我的路由应该发生变化,同时右边的页面会展示对应的页面。
2、侧面导航的组件如下:
3、由于我们的右边页面展示需要用路由来控制,所以我们需要用 router-view
4、我们的APP.vue页面的展示也需要用路由控制,所以也需要用到router-view
5、接下来我们在router文件下写我们的路由路径:
6、然后再main.js中引入,并做路由权限处理
关于路由权限思想:
前端路由权限:
通过在路由元信息meta中配置参数,判断用户将要去的页面是否需要登录,如果不需要登录可以直接跳转,如果需要登录,再做相应的操作
后端路由权限:
- 当用户登录成功之后,后端会返回给前端一个token,前端将该字段保存在浏览器缓存中
- 当路由变化或者发送请求的时候,前端会将缓存中的token带上,传给后端
- 如果token没有过期,直接去到用户想去的页面或者正常发送请求
- 如果token过期,直接返回到登录页
有关vue router知识,参考:Vue Router