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并寫入