vue路由嵌套路由_在Vue.js中使用嵌套路由

vue路由嵌套路由

As your Vue.js Single Page Applications (SPAs) become moderately complex, you start to need Vue Router, and, moreover, nested routes. Nested routes allow for more complex user interfaces with components nested inside each other. Let’s build out a relatively simple use case that shows the utility of nested routes in Vue Router.

随着Vue.js单页应用程序(SPA)变得相当复杂，您开始需要Vue Router和嵌套路由。 嵌套的路由允许更复杂的用户界面以及相互嵌套的组件。 让我们构建一个相对简单的用例，该用例显示Vue Router中嵌套路由的实用程序。

使用Vue CLI进行设置 (Setup with the Vue CLI)

If you don’t have it installed already, install the Vue CLI globally by running either:

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

$ npm install -g @vue/cli

Or

要么

$ yarn global add @vue/cli

Now you will be able to run the vue command from the command line. Let’s create a Vue application called alligator-nest:

现在，您将能够从命令行运行vue命令。 让我们创建一个名为alligator-nest的Vue应用程序：

$ vue create alligator-nest

Choose the default preset at the prompt (hit the enter key). After that, run the following command:

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

$ npm install vue-router

Then, go ahead and open up the alligator-nest directory in your editor of choice.

然后，继续前进，并在您选择的编辑器中打开alligator-nest目录。

基本代码 (Base Code)

The following CSS will help us with positioning elements for our UI. Add it as a stylesheet file in the public/ folder and reference it in public/index.html. We’ll be making use of CSS grid for this:

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

grid.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;
}

---

---

Next, let’s make some changes to the default files that vue-cli added.

接下来，让我们对vue-cli添加的默认文件进行一些更改。

Delete HelloWorld.vue from the src/components folder and delete any mention of it from src/App.vue. Make the following modifications to the HTML markup and CSS styling in App.vue.

从src/components文件夹中删除HelloWorld.vue ，并从src/App.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%;
}

If you run npm run serve in the project’s root directory you can mouse over to localhost:8080 in your browser and see a skeleton layout. Those display: grid properties are useful! Now we can begin routing.

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

输入Vue路由 (Enter Vue Routing)

Let’s whip up a component called AboutPage.vue in our /components folder. It will look like this:

让我们在/components文件夹中启动一个名为AboutPage.vue的/components 。 它看起来像这样：

Now our main.js file needs an /about route. It will look like this.

现在我们的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');

Finally let’s go back to App.vue and change the anchor tag for “About” to a tag with an attribute of to="/about". Then, change the second div to a tag. Make sure to keep the grid positioning class attributes intact.

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

We now have a functional site skeleton with routing handled for the About page.

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

We’re focusing on the routing functionality here so we’re not going to get fancy with styling. Even so, the Travels page is going to look more elaborate.

我们在这里专注于路由功能，因此我们不会对样式感兴趣。 即使这样，“ Travels页面也会显得更加精致。

---

---

To start, create a TravelPage the same way you created an AboutPage. Reference it in main.js.

首先，以创建AboutPage的相同方式创建TravelPage 。 在main.js引用它。

Also create the following two components which will ultimately be nested in TravelPage.vue:

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

TravelAmericaPage.vue

TravelAmericaPage.vue

TravelChinaPage.vue

TravelChinaPage.vue

嵌套路由配置 (Nested route configuration)

Now, let’s update both main.js and TravelPage.vue to reference those nested routes using children. main.js must be updated to have the following definition for the routes constant:

现在，让我们同时更新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
  }
];

Note that the nesting of children can continue infinitely.

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

And TravelPage.vue can be written in the following way:

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

TravelPage.vue

TravelPage.vue

Check out localhost:8080 and you will see that the Travels page has 2 subpages within it! Our URLs update accordingly when you click on either link.

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

结论 (Conclusion)

Hopefully this tutorial was useful for you in seeing how to get started with nested routes!

希望本教程对您了解如何开始使用嵌套路由很有用！

Other things to keep in mind on the topic — we could have routes defined with dynamic segments such as path: '/location/:id'. Then, on the views for those routes we can reference that id as this.$route.params. This is useful when you have more data of a particular type (users, pictures, etc.) that you are wishing to display on your site/app.

在该主题上要记住的其他事情-我们可以使用动态段(例如path: '/location/:id'定义路由。 然后，在这些路由的视图上，我们可以将该id引用为this.$route.params 。 当您希望在网站/应用上显示更多特定类型的数据(用户，图片等)时，此功能很有用。

Later!

稍后！

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-nested-routes

vue路由嵌套路由