Vuejs布局和页面组件 [英] Vuejs Layouts and Page Components

问题描述

我正在使用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

这篇关于Vuejs布局和页面组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！