Vue.js路由

image.png

---

（1）路由模式的选择

image.png

---

默认是hash

---

（2）动态路由

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

---

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

---

image.png

---

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

   
   image.png

3. 按照默认Hash模式输入url

   
   image.png

---

4. 得到页面效果

   
   

---

（3）路由的懒加载

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

---

image.png

导航钩子

路由跳转的回退参数失效

---

image.png

（5）路由跳转后数据的获取

image.png

（6）打印路由信息？

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