vuex路由通信 vue

第2部分：了解如何在SPA中使用Vue路由器 (Part 2: learn how to use Vue Router with your SPA)

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase.

了解如何使用Vue.js，Vuex，Vue Router和Firebase创建送餐网站。

This is part two of my four-part series on building a Vue application. Here is a list of all the parts:

这是我关于构建Vue应用程序的四部分系列的第二部分。 这是所有部分的列表：

回顾 (Recap)

In the first part of this series, we created our Vue application using the Vue CLI. Also, we added Vuetify to the app. I am using Vuetify for styling the app. I will also take advantage of the many UI components that it offers.

在本系列的第一部分中，我们使用Vue CLI创建了Vue应用程序。 另外，我们将Vuetify添加到了该应用程序中。 我正在使用Vuetify设置应用程序的样式。 我还将利用它提供的许多UI组件。

After getting everything installed, we styled the home page of our application.

安装完所有内容后，我们对应用程序的主页进行了样式设置。

使用Vue路由器 (Using Vue Router)

Vue router provides the navigation for our application. When you click on the SIGN IN button, it will redirect you to the page to login. When you click the MENU button, it will redirect you to the page that shows the available meal plans.

Vue路由器为我们的应用程序提供导航。 当您单击登录按钮时，它将重定向您到该页面进行登录。 当您单击“ 菜单”按钮时，它将重定向您到显示可用膳食计划的页面。

The router.js file contains the configuration for routing. Open that file. In that file, you will see two routes. One that displays the Home.vue component when you hit ‘/’ route. The other displays the about.vue component when you hit the route ‘about’.

router.js文件包含用于路由的配置。 打开该文件。 在该文件中，您将看到两条路线。 当您按'/'路线时显示Home.vue组件的一个。 当您点击路线“ about”时，另一个将显示about.vue组件。

We will need to create routes for every page in our application. Our application will need the following routes:

我们将需要为应用程序中的每个页面创建路由。 我们的应用程序将需要以下路线：

• /
  /
• /menu
  /菜单
• /sign-in
  /登入
• /join
  /加入

When we used the Vue CLI to create out the app, we selected to install Vue Router. By default, this created routes for ‘/’ which is home and ‘/about’ for the about page. In part 4 we will use the about page to show all the recipes the user has ordered.

当我们使用Vue CLI创建应用程序时，我们选择安装Vue Router。 默认情况下，这会为“ /”(首页)和“ / about”(关于页面)创建路由。 在第4部分中，我们将使用“关于”页面显示用户订购的所有食谱。

We need to add three new routes to the routes array. After adding these new routes, this is what our router.js file looks like:

我们需要向路由数组添加三个新路由。 添加这些新路由后，我们的router.js文件如下所示：

import Vue from 'vue';import Router from 'vue-router';import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({    mode: 'history',    base: process.env.BASE_URL,    routes: [        {            path: '/',            name: 'home',            component: Home        },        {            path: '/about',            name: 'about',            component: () => import('./views/About.vue')        },        {            path: '/menu',            name: 'menu',            component: () => import('./views/Menu.vue')        },        {            path: '/sign-in',            name: 'signin',            component: () => import('./views/Signin.vue')        },        {            path: '/join',            name: 'join',            component: () => import('./views/Join.vue')        }    ]});

视图与组件 (View vs Components)

In our first lesson, we created several new Vue components. I placed these components inside the components folder. For these three new components, we will not create them inside the components folder. Instead, we will put them inside the views folder. The reason is that anything that is hit using a URL like /menu belongs in the views folder. Everything else should be in the components folder.

在第一课中，我们创建了几个新的Vue组件。 我将这些组件放在components文件夹中。 对于这三个新组件，我们不会在components文件夹中创建它们。 相反，我们将它们放在views文件夹中。 原因是使用/menu类的URL命中的任何内容都属于views文件夹。 其他所有内容都应位于components文件夹中。

创建新视图 (Creating new Views)

We need to create new views for each of the three new routes. In the views folder create the following three files:

我们需要为这三个新路线中的每一个创建新视图。 在views文件夹中创建以下三个文件：

• Menu.vue
  Menu.vue
• Signin.vue
  登录
• Join.vue
  加入

Inside each of the files add a <v-container> with a <v-layout>. Inside the layout have an <h1> tag with the name of the page.

在每个文件内添加带有<v-layout>的<v-container>。 在布局内有一个<h1>标记，并带有页面名称。

Here is the Menu.vue file:

这是Menu.vue文件：

Here is the signin.vue file:

这是signin.vue文件：

Here is the Join.vue file:

这是Join.vue文件：

使菜单项可单击 (Making the Menu Items Clickable)

In our <v-toolbar> menu we have four items that a user can click. They are:

在我们的<v-toolbar>菜单中，用户可以单击四个项目。 他们是：

• Menu
  菜单
• Profile
  个人资料
• Sign In
  登入
• Join
  加入

We want to configure each of these so that when a user clicks on them it will take them to the appropriate page. Open up the AppNavigation.vue file. In the <v-toolbar> section find the <v-btn> for the Menu. All we need to do is add to="/menu". We will do this for all four entries, but make sure we specify the correct route that we defined in the router.js file.

我们希望对它们进行配置，以便当用户单击它们时将它们带到适当的页面。 打开AppNavigation.vue文件。 在<v-toolbar>部分中，找到菜单的<v-btn>​​。 我们需要o do is ad =“ / menu”。 我们将对所有四个条目执行此操作，但是请确保指定在router.js文件中ined in t的正确路由。

We don’t have a menu option to return to the home page. We can fix this by making the app name redirect to the home page. But the title is not a button, so adding to="/menu" will not work. Vue Router provides the option to surround a link with <router-link to=”/”>. We will do this for our app title.

我们没有菜单选项可返回首页。 我们可以通过将应用名称重定向到首页来解决此问题。 但是标题不是按钮，因此添加to="/menu"将不起作用。 Vue路由器提供了使用<router-link to=” /”>包围链接的选项。 我们将针对我们的应用标题进行此操作。

Here is what my AppNavigation looks like now:

这是我现在的AppNavigation外观：

When we do this, we have a slight problem with our app title in the menu. It has changed from being white text to being blue text with an underline. This is the default styling for an anchor tag. We can overcome this by adding the following style:

执行此操作时，菜单中的应用程序标题会出现轻微问题。 它已从白色文本变为带下划线的蓝色文本。 这是锚标记的默认样式。 我们可以通过添加以下样式来克服此问题：

a {    color: white;    text-decoration: none;}

Now we are back to where we were. If you click on all the items on the menu, they will redirect you to the appropriate page. We only have a slight problem with the About.vue file. This file displays the contents differently. So that we have consistency, update the About.vue file to be this:

现在我们回到了过去。 如果单击菜单上的所有项目，它们会将您重定向到适当的页面。 About.vue文件只有一个小问题。 此文件以不同方式显示内容。 为了保持一致性，请将About.vue文件更新为：

获取代码 (Get the Code)

Even though this is a 4-part series, you can get the Please help me out and star the repo when you get the code.

即使这是一个四部分的系列，您也可以获得 获取代码后，请帮助我，并给存储库加注星标 。

摘要 (Summary)

In this part of this series, you have learned:

在本系列的这一部分中，您了解了：

• how Vue Router works
  Vue Router如何工作
• how to load new routes
  如何加载新路线
• how to setup menu to load each page
  如何设置菜单以加载每个页面

下一步是什么 (What’s Next)

In the next part of this series, we will cover using Firebase for Authentication. Vuex allows you to provide “state” within your application. We will be signing up for access to a recipe API. From that API we will be getting recipes to display to users for our menu page.

在本系列的下一部分中，我们将介绍如何使用Firebase进行身份验证。 Vuex允许您在应用程序中提供“状态”。 我们将注册访问食谱API。 通过该API，我们将获得菜单页面上显示给用户的食谱。

If you enjoyed this article please clap for it. If you think somebody else would benefit from this article please share it with them.

如果您喜欢这篇文章，请为它鼓掌。 如果您认为其他人将从本文中受益，请与他们分享。

If you have any questions or find anything wrong with the code, please leave a comment. If there are other topics you would like for me to write about, please leave a comment.

如果您有任何疑问或代码有任何问题，请发表评论。 如果您希望我撰写其他主题，请发表评论。

更多文章 (More Articles)

Here are some other articles I have written that you might want to read.

这是我写的其他一些文章，您可能想阅读。

翻译自:

vuex路由通信 vue