Question

我使用Laravel和Vue创建一个具有master layout.blade文件的应用程序，然后我使用组件和VueRouter。

我无法理解的是如何实现以下目标。可以说我有两条路线＆＃39; Home＆＃39;和＆＃39;关于＆＃39;它调用专用的home.vue和about.vue组件文件。

如果在组件之外我对母版页中包含的页面标题有H1。我该如何更新？我是否在route.js或组件文件中执行此操作？

Answer 1

解决此问题的最佳方法是使用包含所有静态组件的基本组件，即导航菜单，页脚和router-view。我认为您可能会因为在blade中创建布局而感到困惑，但更容易将刀片文件作为切入点来引入scripts和css并给出Vue某处可以安装你的App.So你会看到一个类似这样的刀片文件：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My App</title>

        <link href="/css/app.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
       <div id="app">

       </div>
       <script src="/js/app.js"></script>
    </body>
</html>

然后，您将在基本组件（通常是App.vue）中创建布局，并将其传递给app.js中的渲染函数：

import App from './components/App.vue'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

然后你的App.vue会有类似的内容：

<template>
  <nav-menu></nav-menu>
  <router-view></router-view>
  <app-footer></app-footer>
</template> 

<script type="text/javascript">
  import NavMenu from './components/NavMenu.vue'
  import AppFooter from './components/AppFooter.vue'

  export default{
    components:{
      NavMenu,
      AppFooter
    }
  }
</script>

通过这种方式，您可以使用组件逐步构建应用程序。如果您有一个花哨的标题，那么它也可以是您放置在每个页面上的组件。我把JSFiddle放在一起，显然这些不是单个文件组件，但它显示了我所说的基本概念：https://jsfiddle.net/k3r3uzpx/

更新组件外部的元素

1 个答案: