在 vuejs 中验证后如何路由到仪表板

Question

如何在重定向到仪表板之前验证用户输入。我在下面给出了代码，

下面的代码工作正常，首先加载仪表板，但需要显示登录页面。然后在验证后它应该重定向到仪表板页面。

请参考下面的链接并下载项目我正在为我的项目使用这个模板，但他们没有得到登录验证。 https://www.creative-tim.com/product/black-dashboard

// app.vue

      <template>
        <div>
          <notifications></notifications>
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </template>

      <script>
        export default {
          methods: {
            disableRTL() {
              if (!this.$rtl.isRTL) {
                this.$rtl.disableRTL();
              }
            },
            toggleNavOpen() {
              let root = document.getElementsByTagName('html')[0];
              root.classList.toggle('nav-open');
            }
          },
          mounted() {
            this.$watch('$route', this.disableRTL, { immediate: true });
            this.$watch('$sidebar.showSidebar', this.toggleNavOpen)

        }
        };
      </script>

      <style lang="scss"></style>

//route.js

      import DashboardLayout from 
           "@/layout/dashboard/DashboardLayout.vue";
      import LoginComponent from "@/layout/dashboard/login.vue"
      import NotFound from "@/pages/NotFoundPage.vue";

      // Admin pages
      const Dashboard = () => import(/* webpackChunkName: "dashboard" 
        */"@/pages/Dashboard.vue");
      const pole = () => import(/* webpackChunkName: "common" */ 
      "@/pages/Poles.vue");


      const routes = [
        {
      path: "/",
          component: DashboardLayout,
          redirect: "/dashboard",
          children: [
            {
              path: "dashboard",
              name: "dashboard",
              component: Dashboard
            },
            {
              path: "Poles",
              name: "Poles",
              component: pole
            } 
          ]
        },
        { path: "*", component: NotFound },
      ];
     export default routes;

//login.vue

       <template>
         <div class="login-wrapper border border-light">
           <div  class="form-signin">
        <h2  >Please sign in</h2>

        <input   type="text" name="username" v-model="input.username" 
              placeholder="Username"  class="form-control"   required 
                  autofocus>

        <input  type="password" name="password" v-model="input.password" 
             placeholder="Password"  class="form-control"   required>
        <button class="btn btn-lg btn-primary btn-block"v- 
                  on:click="login()">Login</button>
      </div>
    </div>
  </template>

<script>
    export default {
        name: 'login',
        data() {
            return {
                input: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            login() {
                if(this.input.username != "" && this.input.password != 
                         "") {
                    if(this.input.username == "admin"  && 
                    this.input.password =="admin") {

                      this.$router.push('DashboardLayout');  
                    } else {
                        alert("The username and / or password is 
                    incorrect");
                    }
                } else {
                    console.log("A username and password must be 
                 present");
                }
            }
        }
    };
    </script>

Answer 1

router.push 需要一个路径，所以

this.$router.push('dashboard');

应该做的伎俩