Vuejs布局和页面组件

本文介绍了Vuejs布局和页面组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用Laravel 5.6和Vuejs 2.我是Vuejs的初学者并且坚持布局结构。我想在Vuejs上完全使用laravel for backend API和前端，这样我就可以在不刷新浏览器的情况下移动到不同的页面。

I'm using Laravel 5.6 and Vuejs 2. I'm a beginner in Vuejs and stuck at the layout structure. I want to use laravel for backend API and frontend completely on Vuejs so that i can move to different pages without refreshing the browser.

我在components文件夹中创建了这些

I have created these in the components folder

Components -INCLUDES - navbar.vue - footer.vue -PAGES - about.vue - contact.vue -AUTHENTICATION - login.vue - register.vue - resetpassword.vue

我已经安装了Vue路由器并在资产中创建了routes.js文件

I have installed Vue router and made a routes.js file in assets

我的问题是如何使用上面的组件进行布局，以便导航栏和页脚在每个页面和页面组件上保持加载而不会在单击链接时刷新。

My question is how to make a layout with the components above so that navbar and footer stay on every page and page components load without refreshing when clicking on the links.

推荐答案

您应该有一个主要组件，例如 app.vue 您导入路由器并显示路由器视。然后，您还可以在其中使用导航和页脚组件。这样的事情：

You should have a main component, such as app.vue where you import the router and display the router-view. Then, you can also use your navigation and footer components in there. Something like this:

<template> <div id="app"> <Navigation v-if="isHome" /> <router-view></router-view> <BottomFooter /> </div> </template>

在app.js文件中（或者main.js，类似的东西）

In your app.js file (or main.js, something like that)

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter); //import here page components import App from './App.vue' import Home from './components/Home.vue' //Routes const routes = [ { path: '/', name: 'home', component: Home } //other routes here ]; const router = new VueRouter({ mode: 'history', routes // short for `routes: routes` }); //Vue Init new Vue({ el: '#app', router, render: h => h(App) })

我的文件结构与Vue和Laravel

My file structure with Vue and Laravel