vuex路由通信 vue_如何使用Vue.js，Vuex，Vuetify和Firebase构建SPA：使用Vue路由器

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应用程序的四部分系列的第二部分。这是所有部分的列表：

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

第1部分：使用Vuetify和Vue路由器安装Vue并构建SPA

Part 2: Using Vue Router

第2部分：使用Vue路由器

Part 3: Using Vuex and accessing API

第3部分：使用Vuex和访问API

Part 4: Using Firebase for Authentication

第4部分：使用Firebase进行身份验证

回顾 (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: () =&gt; import('./views/About.vue')        },        {            path: '/menu',            name: 'menu',            component: () => import('./views/Menu.vue')        },        {            path: '/sign-in',            name: 'signin',            component: () =&gt; 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

文件：

<template>    <v-container fluid>        <v-layout>            <h1>Menu Page</h1>        </v-layout>    </v-container></template>

<script>export default {    name: 'Menu'};</script>

<style scoped></style>

Here is the

signin.vue

file:

这是

signin.vue

文件：

<template>    <v-container fluid>        <v-layout>            <h1>Signin Page</h1>        </v-layout>    </v-container></template>

<script>export default {    name: 'Signin'};</script>

<style scoped></style>

Here is the

Join.vue

file:

这是

Join.vue

文件：

<template>    <v-container fluid>        <v-layout>            <h1>Join Page</h1>        </v-layout>    </v-container></template>

<script>export default {    name: 'Join'};</script>

<style scoped></style>

使菜单项可单击 (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 t

o do is ad

d to="/menu". We will do this for all four entries, but make sure we specify the correct route that we def

ined in t

he 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外观：

<template>    <span>        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>            <v-list>                <template v-for="(item, index) in items">                    <v-list-tile :key="index">                        <v-list-tile-content>                            {{item.title}}                        </v-list-tile-content>                    <;/v-list-tile>                    <v-divider :key="`divider-${index}`"></v-divider>                </template>            </v-list>        </v-navigation-drawer>        <v-toolbar app color="brown darken-4" dark>            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>            <v-spacer class="hidden-md-and-up"></v-spacer>            <router-link to="/"&gt;                <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>;            </router-link>            <v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>            <v-spacer class="hidden-sm-and-down"></v-spacer>            <v-btn flat class="hidden-sm-and-down" to="/sign-in">SIGN IN</v-btn>            <v-btn color="brown lighten-3" class="hidden-sm-and-down" to="/join">JOIN</v-btn>        </v-toolbar>    </span></template>

<script>export default {    name: 'AppNavigation',    data() {        return {            appTitle: 'Meal Prep',            drawer: false,            items: [                { title: 'Menu' },                { title: 'Profile' },                 { title: 'Sign In' },                { title: 'Join' }            ]        };    }};</script>

<style scoped></style>

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文件更新为：

<template>    <v-container fluid>        <v-layout>            <h1>About Page</h1>        </v-layout>    </v-container></template>

<script>export default {    name: 'About'};</script>

<style scoped></style>

获取代码 (Get the Code)

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

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

摘要 (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.

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

vuex路由通信 vue_如何使用Vue.js，Vuex，Vuetify和Firebase构建SPA：使用Vue路由器

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

回顾 (Recap)

使用Vue路由器 (Using Vue Router)

视图与组件 (View vs Components)

创建新视图 (Creating new Views)

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

获取代码 (Get the Code)

摘要 (Summary)

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

更多文章 (More Articles)

继续阅读

Cloud Studio初体验

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

使用 ctypes 进行 Python 和 C 的混合编程

【python】【数据处理】画多维数据分布图

mybatis_入门程序Mybatis入门

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【python】netconf协议对接管理设备

「Python 网络自动化」NETCONF —— Python 使用 NETCONF 管理配置 H3C 网络设备

【递归】高效率求2的n次幂

win10本地scala和spark安装安装scala安装spark

手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目

scala (3) Function 和 Method

在python中创建excel并写入