![92732c01f728faa9196e283060369a43.png](https://i-blog.csdnimg.cn/blog_migrate/e566fa1b163fd3739b3545353899e639.jpeg)
要想加新的点击页面并且绑定路由需要以下步骤
1.在router.js里加入新路由,普通路由需要在path中加‘/’如下图。
![7aced928a1d531f18a070f2e3c23fd8f.png](https://i-blog.csdnimg.cn/blog_migrate/d73a18c169d86d75469342238462c0aa.png)
2.在views里创建新的文件夹,文件夹里的vue文件名字为index.vue时可在路由中省略vue文件的文件名 (views里放的是Head里的大路由文件,一会的components里放的是子路由们的文件)
![f915967223fd27c67f8375589ee50489.png](https://i-blog.csdnimg.cn/blog_migrate/48e08fd6a4688209aaa11c943ff8c8d4.png)
3.还要再router.js中引入此文件,如下图
![458db7338232584dc7325daae1958895.png](https://i-blog.csdnimg.cn/blog_migrate/6414f1a1b291b9e64c952741d46cbf87.png)
4.在views里的文件里写这个组件的内容即可,记得写
![9b9974e22aed855b45768c09609cf38d.png](https://i-blog.csdnimg.cn/blog_migrate/3a6e235b86bd5a557be51d00b8e69673.png)
来实现在路由中跳转子路由,xxx1是父路由的名字,xxx2是子路由的名字,没写对就跳转不过去。
再写<router-view></router-view>
来渲染子路由。
5.写好后在router.js中的父路由下写子路由的路径,如下图。
![37d7cb84c67a307bcd3e9c9ce2298902.png](https://i-blog.csdnimg.cn/blog_migrate/0341975c0d79ef820746ef7b98a2a82f.jpeg)
6.写好后在上面import引用它,暂时报错也没事,先写上,因为还没在components里面创建他们。
![55ebde73086a83bd9c9f16f5534a2106.png](https://i-blog.csdnimg.cn/blog_migrate/9399541d8b532c89a1123e055ce5f9d0.png)
7.在components里创建子路由的组件,名字要和前边定义的一样。这时开始写子路由的内容就行了,因为之前在views里的父路由里已经<router-view></router-view>
过所以子路由自动渲染在了父路由里。
等过两天全写完了再往GitHub上传代码,然后我会把链接放在评论区。
对了,记得在主路由标题上写跳转代码
![c81fcac5dfbde9518dcfcecb8ed186f4.png](https://i-blog.csdnimg.cn/blog_migrate/dd3282696fa250b8ee5981cd4c15a055.png)
————————————————
版权声明:本文为CSDN博主「做个前端工程师吧」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
vue路由与子路由嵌套的使用(配合源码观看)_qq_44497296的博客-CSDN博客blog.csdn.net![4b32959565468254bce180bb88087c40.png](https://i-blog.csdnimg.cn/blog_migrate/6cc0f344920d1269f8f3740c25a4745c.png)