Question

我有2个模板

<template v-if="this.$route.name === 'login'">
  <div>{{this.$route.name}}</div>
  <router-view></router-view>
</template>
<template v-else>
  <v-layout>
    <router-view></router-view>
  </v-layout>
</template>

v-else中的布局显示顶部栏标题和一些登录详细信息，但是当其唯一登录页面显示在路线/users/sign_in上时，我只想显示登录页面。

因此，我尝试了上述if else模板条件，但无法基于route.name仅显示登录路由器视图，我的条件不起作用

更新：

尝试此<template v-if= $ {$ route.name} ==='登录'>时，我在控制台中遇到错误。 for App.vue？e26b：2未捕获的TypeError：无法读取未定义的属性“名称”

更新：

路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Users from "./components/views/users/Users";
import Login from "./components/Login"

import Gravatar from 'vue-gravatar';
Vue.component('v-gravatar', Gravatar);

import Header from "./components/shared/_header";
Vue.component("v-header", Header);

import CurrentUser from "./components/shared/_current_user";
Vue.component("v-current-user", CurrentUser);

import Sidebar from "./components/shared/_sidebar";
Vue.component("v-sidebar", Sidebar);

import Layout from "./components/shared/Layout";
Vue.component("v-layout", Layout);


const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: "/users/sign_in", component: Login, name: "login", meta: { title: "Login"}},
    { path: "/", component: Users, name: "users", meta: { title: "Users"} },
    { path: "/users", redirect: '/'}
  ]
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
});

export default router;

Login.vue

<template>
  <div id="login" class="app flex-row align-items-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card-group">
            <div class="card p-4">
              <div class="card-body">
                <h1>Login</h1>
                <p class="text-muted">Sign In to your account</p>
                <form class="new_user" id="new_user" action="/users/sign_in" accept-charset="UTF-8" method="post">
                  <input name="utf8" type="hidden" value="✓">
                  <input type="hidden" name="authenticity_token">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-user"></i>
                      </span>
                    </div>
                    <input class="form-control" type="text" placeholder="Email" name="user[email]">
                  </div>
                  <div class="input-group mb-4">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                      </span>
                    </div>
                    <input class="form-control" type="password" placeholder="Password" name="user[password]">
                  </div>
                  <div class="row">
                    <div class="col-6">
                      <input class="btn btn-primary px-4" type="submit" name="commit" value="Login">
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      // csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    })
  }
</script>

Answer 1

$route.name应该可以。问题是v-if逻辑无法在模板的根元素中写入。您需要在子元素中完成此操作。

<template>
  <div v-if="$route.name==='login'">
    ...
  </div>
  <div v-else>
    ...
  </div>
</template>

如果this。$ route.name是登录vuejs，则仅显示登录页面

1 个答案: