Vue-Router详解

 目录：

1、前端路由的发展历程

2、Vue-Router基本使用

3、路由懒加载分包处理

4、动态路由和路由嵌套

5、路由的编程式导航

6、动态管理路由对象

7、路由导航守卫钩子

一、前端路由的发展历程

 

 前端路由阶段：（修改url地址从而改变组件的显示）

 

二、Vue-Router基本使用

 

 

 

 

 history模式的好处是没有#号

下图是router-link的to属性字符串和对象形式的写法

 每次点击router-link的 to 的时候，被点中的会被添加router-link-active的的class名字，我们可以修改style来给它添加被点击后的样式。同时我们也可以自定义这个名字，只需要 使用active-class属性就可以。

三、路由懒加载分包处理

 下图是为了让你能看懂webpack打包之后每个文件对应的是哪个组件，其方法是在import（）的括号里面添加注释/* webpackChunkName:" 打包后想要的名字 " */

四、动态路由和路由嵌套

下图的create中是指在options api获取的方法，不是指才composition api中获取 

 在composition api中获取动态路由传递的参数应该这样做：

注意这个时候如果是在2个路由里面切换的话，这个在代码里面获取的方法不能刷新获取新的数据(就是只执行一次，后续不管怎么跳转都没效果了)，用onactive也没用。

 

用路由导航守卫可以做到在同一个组件的/：id发生改变的时候，在js里面能获取更新的信息：

 

 

 

但是上面的方法不常用，既在同一个组件里面切换用户信息，一般是跳转到另外一个组件：

 

 如果你要处理用户输入的路径，那就用下面这里的方法：

 

 

五、路由的编程式导航

下图前2张图是options api编写方式，第三个才是setup 编写方式，需要从router里引入useRouter：（）

还可以用name的方式跳转（但是没有重定向的效果，就是单纯改了url，没有改变router-view的内容）：

 

query发送的参数在url里面看的到：

 query的参数在js中如何获取（和动态路由的方式一样）？

 

六、动态管理路由对象

在后台管理系统中用的比较多

注意：

（1）虽然是选择性的给用户查看路由，但是对于没有显示的路由菜单，我们还是要在路由里面注册这个路径的。（这种方法有危险：对于直接在url输入没显示的路径，还是可以让没有权限的人进入到隐藏的路由里面）

（2）鉴于以上的危险，我们选择动态注册路由。

 如何做到动态管理路由？

（1）下图的 isAdmin的方法：（添加的是一级路由） 

（2）添加二级路由（二级路由的path不要加 / ，父路由要写name的值，不是写路径，这是name的正确用法，之前在push里面使用是不管用的）：

 

七、路由导航守卫钩子

注意：

（1）在回调函数里面使用 to.path或者from.path可以获取路由的地址。

（2）当用户没有登录过，又想打开一些需要登录才能看见的页面，我们要让他先登录：

用户登录成功后需要做的事：（记录token和跳转到该跳转到的页面） 

 退出登录：

 

 

 

导航守卫 | Vue Router (vuejs.org)https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 

导航的整个流程：