Vue.js路由

image.png

(1)路由模式的选择
image.png

默认是hash


(2)动态路由

也就是改变路由的时候向url传递参数,通过参数名跟具体值的方式


  1. 在router/index.js里面添加路由信息

image.png

  1. 在userinfo.vue里面获取路由传递的值


    image.png
  2. 按照默认Hash模式输入url


    image.png

  1. 得到页面效果



(3)路由的懒加载

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效


image.png
导航钩子

路由跳转的回退参数失效


image.png
(5)路由跳转后数据的获取
image.png
(6)打印路由信息?

必须得在.vue的文件里才能获取
this.$router.options.routes
前端进行权限管理不是为了安全,是为了用户体验

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容