在Vue.js中使用嵌套路由

作者：ParthivMohan应用程序(SPA)变得相当复杂，您开始需要Vue路由和嵌套路由。嵌套路由允许更复杂的用户界面，组件相互嵌套。让我们创建一个相对简单的用例来演示VueRouter中嵌套路由的有用性。使用VueCLI设置如果尚未安装，请运行以下命令以全局安装VueCLI：$npminstall-g@vue/cli或$yarnglobaladd@vue/cli现在您可以从命令行运行vue命令。让我们创建一个名为alligator-nest的Vue应用程序：$vuecreatealligator-nest在提示符处选择默认预设（按Enter）。然后，运行以下命令：$npminstallvue-router然后，在您选择的编辑器中打开alligator-nest目录。CSS下面的基本代码将帮助我们为UI定位元素。将它作为样式表文件添加到public/文件夹中，并在public/index.html中引用它。为此，我们将使用CSS网格：grid.css.row1{grid-row-start:1;grid-row-end:2;}.??row12{grid-row-start:1;grid-row-end:3;}.row123{grid-row-start:1;grid-row-end:4;}.row2{grid-row-start:2;grid-row-end:3;}.row23{grid-row-start:2;grid-row-end:4;}.row3{grid-row-start:3;grid-row-end:4;}.col1{grid-column-start:1;grid-column-end:2;}.col12{grid-column-start:1;grid-column-end:3;}.col123{grid-column-start:1;grid-column-end:4;}.col1234{grid-column-start:1;grid-column-end:5;}.col2{grid-column-start:2;grid-column-end:3;}.col23{grid-column-start:2;grid-column-end:4;}.col234{grid-column-start:2;grid-column-end:5;}.col3{grid-column-start:3;grid-column-end:4;}.col34{grid-column-start:3;grid-column-end:5;}.col4{grid-column-start:4;grid-column-end:5;}接下来我们对vue-cli添加的默认文件做一些修改。从src/components文件夹中删除HelloWorld.vue，并从src/App.vue中删除与其相关的所有内容。对App.vue中的HTML标记和CSS样式进行如下修改。html,body{height:100vh;宽度：100vw；填充：0；margin:0;}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；颜色：#2c3e50；填料：2%；高度：100%；网格;网格模板行：20%80%；grid-template-columns:25%25%25%25%;}如果您在项目的根目录下运行npmrunserve，您可以将鼠标悬停在浏览器中的browseonlocalhost:8080上并查看框架布局。那些display:grid属性很有用！现在我们可以开始创建路由了。进入Vue路由会在/components文件夹中创建一个名为AboutPage.vue的组件。看起来像这样：现在我们的main.js文件需要/about路由。看起来像这样。从“vue-router”导入VueRouter；从“vue”导入Vue；从“./App.vue”导入App；Vue.config.productionTip=false；从“vue-router”导入VueRouter；Vue.use(VueRouter);从'./components/AboutPage.vue'导入AboutPage；constroutes=[{path:'/about',component:AboutPage},]constrouter=newVueRouter({routes})newVue({render:h=>h(App),router}).$mount('＃应用程序'）;最后，让我们回到App.vue并将“关于”锚标记更改为标签。然后，将第二个div更改为标签。确保保持网格定位类属性不变。我们现在有一个功能齐全的站点框架，其中包含为“关于”页面处理的路由。我们在这里专注于路由功能，因此我们不会在样式上花费太多时间。即便如此，还是让Travels页面看起来更精致一些。首先，以与创建AboutPage相同的方式创建一个TravelPage。在main.js中引用它。还需要创建以下两个组件，它们最终将嵌套在TravelPage.vue中：TravelAmericaPage.vueTravelChinaPage.vue配置嵌套路由现在，让我们也更新main.js和TravelPage.vue使用子项来引用这些嵌套路线。Main.js必须更新为具有以下路由常量定义：constroutes=[{path:'/travel',component:TravelPage,children:[{path:'/travel/america',component:TravelAmericaPage},{path:'/travel/china',component:TravelChinaPage}]},{path:'/about',component:AboutPage}];请注意，孩子的嵌套可以无限继续。而TravelPage.vue可以这样写：TravelPage.vuediv{text-align:center;}#travel{}显示：网格；grid-template-rows:20%40%40%;}.flex-container{display:flex;justify-content:space-around;}查看localhost:8080，你会看到Travels页面包含2个子页面！当您点击任一链接时，我们的URL将相应更新。结论我希望本教程能帮助您了解如何使用嵌套路由！关于此主题的附加说明-我们可以使用动态段定义路由，例如path:'/location/:id'。然后在这些路线的视图上，您??可以将该ID引用为this.$route.params。当您想在网站和应用程序上显示更具体类型的数据（用户、图像等）时，此功能很有用。