在Vue.js中使用嵌套路由

随着Vue.js单页应用程序(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;width:100vw;padding:0;margin:0;}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;padding:2%;height:100%;display:grid;grid-template-rows:20%80%;grid-template-columns:25%25%25%25%;}如果您在项目的根目录下运行npmrunserve，您可以将鼠标悬停在浏览器中的localhost:8080上并查看框架布局。那些display:grid属性很有用！现在我们可以开始创建路由了。进入Vue路由会在/components文件夹中创建一个名为AboutPage.vue的组件。它看起来像这样：现在我们的main.js文件需要/about路由。看起来像这样。importVueRouterfrom'vue-router';importVuefrom'vue';importAppfrom'./App.vue';Vue.config.productionTip=false;importVueRouterfrom'vue-router';Vue.use(VueRouter);importAboutPagefrom'./components/AboutPage.vue';constroutes=[{path:'/about',component:AboutPage},]constrouter=newVueRouter({routes})newVue({render:h=>h(App),router}).$mount('#app');最后，让我们回到App.vue并将“About”锚标记更改为具有属性to="/about"的标记。然后，将第二个div更改为标签。确保保持网格定位类属性不变。我们现在有一个功能齐全的站点框架，其中包含为“关于”页面处理的路由。我们在这里专注于路由功能，因此我们不会在样式上花费太多时间。即便如此，还是让Travels页面看起来更精致一些。首先，以与创建AboutPage相同的方式创建一个TravelPage。在main.js中引用它。还需要创建以下两个组件，它们最终将嵌套在TravelPage.vue中：TravelAmericaPage.vueTravelChinaPage.vue配置嵌套路由现在，让我们更新main.js和TravelPage.vue到使用children来引用这些嵌套路由。必须更新main.js以具有以下路线常量定义：constroutes=[{path:'/travel',component:TravelPage,children:[{path:'/travel/america',component:TravelAmericaPage},{path:'/travel/china',component:TravelChinaPage}]},{path:'/about',component:AboutPage}];请注意，孩子的嵌套可以无限继续。而TravelPage.vue可以这样写：linkto="/travel/america">美国中国