vue的动态路由大家是比较熟悉的,利用一个模版实现多个数据项的路由,比如localhost:8080/user/张三,localhost:8080/user/李四,张三和李四使用同一个模板即可。但有时候,我们需要对张三或李四的信息再度进行解读时,就需要用到嵌套路由,现在我们一起来实现以下:
1.使用vue create myproject 命令创建工程myproject。
2.进入该工程根目录,使用vue add router命令添加路由插件。
3.在src目录中的views目录下创建组件UserView.vue文件,内容如下:
4.在views目录下创建嵌套路由的组件UserInfo.vue,代码如下:
5.编辑src/router/index.js文件,内容如下:
6.运行:npm run serve