vue路由

47 阅读1分钟

简单记录一下vue的路由的编写

1、首先看下图:

image.png

我的整个页面分为三部分,上部的title,侧面的导航,和右边的main页面。当侧面导航变化时,我的路由应该发生变化,同时右边的页面会展示对应的页面。

2、侧面导航的组件如下:

image.png

3、由于我们的右边页面展示需要用路由来控制,所以我们需要用 router-view

image.png

4、我们的APP.vue页面的展示也需要用路由控制,所以也需要用到router-view

image.png

5、接下来我们在router文件下写我们的路由路径:

image.png

6、然后再main.js中引入,并做路由权限处理

image.png

关于路由权限思想:

前端路由权限: 通过在路由元信息meta中配置参数,判断用户将要去的页面是否需要登录,如果不需要登录可以直接跳转,如果需要登录,再做相应的操作

后端路由权限:

  • 当用户登录成功之后,后端会返回给前端一个token,前端将该字段保存在浏览器缓存中
  • 当路由变化或者发送请求的时候,前端会将缓存中的token带上,传给后端
  • 如果token没有过期,直接去到用户想去的页面或者正常发送请求
  • 如果token过期,直接返回到登录页

有关vue router知识,参考:Vue Router