Vue.js中如何使用嵌套路由-创新互联

这篇文章主要介绍Vue.js中如何使用嵌套路由，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

用 Vue CLI 进行设置

如果尚未安装，请运行以下命令全局安装 Vue CLI：

$ npm install -g @vue/cli

或者

$ yarn global add @vue/cli

现在你能从命令行运行vue 命令了。让我们创建一个名为 alligator-nest 的 Vue 应用：

$ vue create alligator-nest

在提示符下选择默认预设（按 Enter 键）。之后，运行以下命令：

$ npm install vue-router

然后，在你选择的编辑器中打开alligator-nest 目录。

基本代码

以下 CSS 将帮助我们为 UI 定位元素。将其作为样式表文件添加到  public/ 文件夹中，并在public/index.html 中引用它。为此，我们将使用 CSS grid：

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%;
}

如果你在项目的根目录中运行npm run serve，则可以将鼠标悬停在浏览器中的localhost:8080 上，并查看框架布局。那些display:grid 属性很有用！现在我们可以开始创建路由了。

输入 Vue 路由

在/components 文件夹中创建一个名为AboutPage.vue 的组件。它看起来像这样：

现在我们的main.js 文件需要/about 路由。它看起来像这样。

import VueRouter from 'vue-router';
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import AboutPage from './components/AboutPage.vue';

const routes = [
  { path: '/about', component: AboutPage },
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

最后，让我们回到App.vue，并将 “About” 的锚标记更改为属性为to="/about" 的 标签。然后，将第二个div 更改为 标签。确保保持网格定位类属性不变。

现在，我们有了一个功能齐全的站点框架，并为 “About” 页面处理了路由。

我们在此重点介绍路由功能，因此不会在样式上话费太多时间。尽管如此，我们也要让Travels 页面看起来更精致一些。

首先，创建一个TravelPage，方法与创建AboutPage 相同。在main.js 中引用它。

还需要创建以下两个组件，这些组件最终将嵌套在TravelPage.vue 中：

TravelAmericaPage.vue

TravelChinaPage.vue

配置嵌套路由

现在，让我们同时更新main.js 和TravelPage.vue，以使用children 来引用这些嵌套路由。必须将main.js 更新为对routes 常量具有以下定义：

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

请注意，子级的嵌套可以无限继续下去。

并且TravelPage.vue 可以通过以下方式编写：

TravelPage.vue

检出localhost:8080，你将看到 Travels 页面中包含 2 个子页面！当你单击任一链接时，我们的 URL 也会相应更新。

以上是“Vue.js中如何使用嵌套路由”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！