一、需求
![](https://img-blog.csdnimg.cn/direct/52054ad20b9747e9974679654c9cd597.png)
二、开发步骤
2-1、路由的安装
![](https://img-blog.csdnimg.cn/direct/51b3c919fc7c4c47bb3a81f8dc31bf22.png)
vue-router3才能在vue2中使用!现在默认是vue-router4版本,要在vue3中使用!所以,安装的时候要指定版本。
2-2、在main.js中引入和使用路由
![](https://img-blog.csdnimg.cn/direct/634702e4c2644e91be5e71275d7c5b85.png)
2-3、创建router文件夹
一般在vue中用了vue-router都会在src下新建一个router文件夹,里面也写一个index.js文件。
![](https://img-blog.csdnimg.cn/direct/1864df33c1c241ce96f366127e94ec09.png)
![](https://img-blog.csdnimg.cn/direct/a4f7dc41d5e04017be75e177fbffaf86.png)
一个应用有一个路由器就够了!
2-4、路由就绪
![](https://img-blog.csdnimg.cn/direct/541e9dd29b1543c187d36ada279be085.png)
2-5、编辑对应的导航页面
![](https://img-blog.csdnimg.cn/direct/9b6326a77537420f8803294a04e2a894.png)
属性to的值就是/组件名
vue-router3才能在vue2中使用!现在默认是vue-router4版本,要在vue3中使用!所以,安装的时候要指定版本。
一般在vue中用了vue-router都会在src下新建一个router文件夹,里面也写一个index.js文件。
一个应用有一个路由器就够了!
属性to的值就是/组件名