五十、进阶之Nuxt动态路由 及 视图

一、动态路由

实现功能：1. 点击nowplaying页面中的数字，跳转到detail页面；

                  2. 并将当前数字显示在detail页面中；

  1. 在nowplaying页面，显示数字列表，并且点击数字实现跳转

2. 在pages文件夹下，创建deatil文件夹（与上图中添加的路由名一致）。

并且在detail文件夹下，创建_myid.vue文件（其中myid是随意取的，获取传过来的数据时使用）

3. 效果图

二、视图

实现功能：

当进入detail页面时，只显示detail页面中的内容，不显示上方的内容。

注意：项目的根组件不是固定的，可以在layout文件夹中自己定义

1. 在layout文件夹中创建文件templateRoot.vue文件

把default.vue中的内容，复制到该文件中，并删除不想显示的部分

2. 在detail/_myid.vue文件中进行设置

添加下面这句话，将templateRoot作为detail的根组件