Vue.js, Vuex, Vuetify 및 Firebase를 사용하여 SPA를 구축하는 방법 : Vue Router 사용

2 부 : SPA에서 Vue Router를 사용하는 방법 알아보기

Vue.js, Vuex, Vue Router 및 Firebase를 사용하여 식사 배달 웹 사이트를 만드는 방법을 알아 봅니다.

이것은 Vue 애플리케이션 구축에 대한 4 부작 시리즈 중 2 부입니다. 다음은 모든 부품의 목록입니다.

1 부 : Vuetify 및 Vue 라우터를 사용하여 Vue 설치 및 SPA 구축

2 부 : Vue 라우터 사용

3 부 : Vuex 사용 및 API 액세스

4 부 : 인증에 Firebase 사용

요약

이 시리즈의 첫 번째 부분에서는 Vue CLI를 사용하여 Vue 애플리케이션을 만들었습니다. 또한 앱에 Vuetify를 추가했습니다. 앱 스타일링에 Vuetify를 사용하고 있습니다. 또한 제공하는 많은 UI 구성 요소를 활용할 것입니다.

모든 것을 설치 한 후 애플리케이션의 홈 페이지 스타일을 지정했습니다.

Vue 라우터 사용

Vue 라우터는 애플리케이션에 대한 탐색을 제공합니다. SIGN IN 버튼 을 클릭하면 로그인 페이지로 이동합니다. 메뉴 버튼 을 클릭 하면 사용 가능한 식사 계획을 보여주는 페이지로 리디렉션됩니다.

router.js 파일은 라우팅 구성이 포함되어 있습니다. 해당 파일을 엽니 다. 이 파일에는 두 개의 경로가 표시됩니다. ‘/’경로를 누를 때 Home.vue 구성 요소를 표시하는 것 입니다. 다른 하나는 'about'경로를 쳤을 때 about.vue 구성 요소를 표시합니다.

애플리케이션의 모든 페이지에 대한 경로를 만들어야합니다. 애플리케이션에는 다음 경로가 필요합니다.

  • /
  • /메뉴
  • / 로그인
  • /어울리다

Vue CLI를 사용하여 앱을 만들 때 Vue Router를 설치하기로 선택했습니다. 기본적으로 이것은 홈인 '/'에 대한 경로와 정보 페이지에 대한 '/ about'을 생성했습니다. 4 부에서는 정보 페이지를 사용하여 사용자가 주문한 모든 레시피를 표시합니다.

route 배열에 3 개의 새로운 경로를 추가해야합니다. 이러한 새 경로를 추가 한 후 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') } ]});

보기 대 구성 요소

첫 번째 강의에서 몇 가지 새로운 Vue 구성 요소를 만들었습니다. 이러한 구성 요소를 구성 요소 폴더에 넣었습니다. 이 세 가지 새 구성 요소의 경우 구성 요소 폴더 내에 만들지 않습니다. 대신 뷰 폴더에 넣습니다. 그 이유는 URL을 사용하여 적중되는 모든 것이 /menu뷰 폴더에 속하기 때문입니다. 다른 모든 것은 구성 요소 폴더에 있어야합니다.

새보기 만들기

세 개의 새 경로 각각에 대해 새보기를 만들어야합니다. 보기 폴더에서 다음 세 파일을 작성하십시오.

  • Menu.vue
  • Signin.vue
  • Join.vue

각 파일 안에. 레이아웃 내부에는

페이지 이름이있는 태그.

다음은 Menu.vue파일입니다.

Menu Page

export default { name: 'Menu'};

다음은 signin.vue파일입니다.

Signin Page

export default { name: 'Signin'};

다음은 Join.vue파일입니다.

Join Page

export default { name: 'Join'};

메뉴 항목을 클릭 가능하게 만들기

메뉴에는 사용자가 클릭 할 수있는 4 개의 항목이 있습니다. 그들은:

  • 메뉴
  • 프로필
  • 로그인
  • 어울리다

사용자가 클릭하면 적절한 페이지로 이동하도록 각각을 구성하려고합니다. AppNavigation.vue 파일을 엽니 다. 섹션에서 메뉴를 찾습니다. t o do is add to = "/ menu" 가 필요 합니다. 네 항목 모두에 대해이 작업을 수행하지만 ined in trouter.js 파일을 정의 하는 올바른 경로를 지정해야합니다 .

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 /”>. We will do this for our app title.

Here is what my AppNavigation looks like now:

 {{item.title}} 
     
       {{appTitle}}; Menu SIGN IN JOIN 
     
export default { name: 'AppNavigation', data() { return { appTitle: 'Meal Prep', drawer: false, items: [ { title: 'Menu' }, { title: 'Profile' }, { title: 'Sign In' }, { title: 'Join' } ] }; }};

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 Page

export default { name: 'About'};

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.

Summary

In this part of this series, you have learned:

  • how Vue Router works
  • 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.

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.

Want a job in Tech? Here is how to use the top online marketplace for job seekers to get that job.

LinkedIn is the world’s largest talent pool with 3 million active job listings. Let me show you how you can tap into…medium.freecodecamp.orgInstantiation Patterns in JavaScript

Instantiation patterns are ways to create something in JavaScript. JavaScript provides four different methods to create…medium.comContributing to Open Source isn’t that hard: my journey to contributing to the Node.js project

As a developer, you should consider contributing to open source software. Many of your potential employers will look…medium.freecodecamp.org

Follow Me On Twitter!