показывать только страницу входа, если это. $ route.name это логин vuejs - PullRequest
Новая
       9

показывать только страницу входа, если это. $ route.name это логин vuejs

0 голосов
/ 28 января 2019

У меня есть 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 я хочу только показать входpage.

Итак, я попробовал вышеупомянутое условие шаблона else, но я не могу показать только вид маршрутизатора входа в систему на основе route.name, мое условие не работает

update:

при попытке этого <template v-if= $ {$ route.name} === 'login' > Я получаю ошибку в консоли.for App.vue? e26b: 2 Uncaught TypeError: Невозможно прочитать свойство '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;

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>

1 Ответ

0 голосов
/ 28 января 2019

$route.name должно работать.Проблема в том, что v-if логика не может записать в корневой элемент шаблона.Вам нужно сделать это в подэлементе. 

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