vue.js - Vue.js 元路由器不渲染组件

问题描述

我按照本教程在路由器中为多个布局添加元数据它可以工作，但布局内的组件不起作用

// 更新 // 在 DevTools 中，我在任何地方都看不到组件，只有布局这是我的代码

应用程序.vue

  <div id="app">
    <component :is="this.$route.meta.layout || 'div'">
      <router-view />
    </component>
  </div>
</template>

  
<script>
export default {
}
</script>
<style lang="scss">
</style>

路由器/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import weappLayout from '../layouts/webappLayout.vue'
import noLayout from '../layouts/no-layout.vue'
import signIN from '../views/sign-in.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { layout: weappLayout }
  },
  {
    path: '/login',
    name: 'sign-in',
    component: signIN,
    meta: { layout: noLayout }
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

如果需要查看组件，请告诉我，提前谢谢<3

<template>
  <div>
    <form class="form-signin">
      <img
        class="mb-4"
        src=""
        alt=""
        width="72"
        height="72"
      />
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input
        type="email"
        id="inputEmail"
        class="form-control"
        placeholder="Email address"
        required
        autofocus
      />
      <label for="inputPassword" class="sr-only">Password</label>
      <input
        type="password"
        id="inputPassword"
        class="form-control"
        placeholder="Password"
        required
      />
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me" /> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">
        Sign in
      </button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
    </form>
  </div>
</template>

<script>
export default {
  name: "sign-in"
};
</script>

<style  >
html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

</style>

主页.vue

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src



export default {
  name: "Home",
  components: {

  }
};
</script>

标签： vue.js

vue.js - Vue.js 元路由器不渲染组件

问题描述

解决方案

推荐阅读