Question

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

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

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

我已经安装了Vue路由器并在资产

中创建了routes.js文件

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

Answer 1

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

<template>
  <div id="app">

    <Navigation v-if="isHome" />  

    <router-view></router-view>

    <BottomFooter />

  </div>
</template>

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

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

Answer 2

文件结构应包括 -

它应该包含src文件夹，其中包含商店，组件和资产，作为任何vue样板的关键元素。

<router-view></router-view>现在也可以写为<router-view/>。它仅显示routes.js中包含的app.vue以下的组件。

app.vue

<template>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">

    </header>
    <div class="mdl-layout__drawer">

      <nav class="mdl-navigation">
        <router-link class="mdl-navigation__link" to="/" @click.native="hideMenu">Home</router-link>
        <router-link class="mdl-navigation__link" to="/postview" @click.native="hideMenu">Post a picture</router-link>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

routes.js可以在src的路由器文件夹中，但是我在src文件夹中已经把它带到了vue-router。

routes.js

import Vue from 'vue'
import Router from 'vue-router'
import homeview from '../components/homeview'
import detailview from '../components/detailview'
import postview from '../components/postview'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homeview',
      component: homeview
    },
    {
      path: '/detailview',
      name: 'detailview',
      component: detailview
    },
    {
      path: '/postview',
      name: 'Postview',
      component: postview
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.use(axios);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Vuejs布局和页面组件

2 个答案: