代码之家 › 专栏 › 技术社区 › Junaid Farooq

如果此.$route.name为login vuejs,则仅显示登录页

vue-router vue.js

Junaid Farooq · 技术社区 · 7 年前

<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中的布局显示了topbar标题和一些登录详细信息,但是当它的唯一登录页面显示在route上时 /users/sign_in 我只想显示登录页面。

所以我尝试了上面的if-else模板条件,但是我无法根据route.name只显示登录路由器视图,我的条件不起作用

更新:

试着这么做 <template v-if= ${$route.name}=='登录' > 控制台出错。对于App.vue?e26b:2未捕获的类型错误:无法读取未定义的属性“name”

路由文件

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;

<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>

1 回复 | 直到 7 年前

Cong Nguyen 7 年前

$route.name 应该有用。问题是 v-if

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