使用vuejs單擊按鈕時如何添加打開另一個組件

Question

我將 vuejs 用於設計目的，我希望當我單擊登錄按鈕時它會打開我的儀表板，但我不能這樣做，因為我是 vue js 的新手，在我的代碼下方 v-on 處理程序中的錯誤：“TypeError：無法讀取屬性 'CForm' 為 null"

vue.esm.js?a026:1897 TypeError: Cannot read property 'CForm' of null at click (eval at./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue -loader","cacheIdentifier":"0b619c3d-vue-loader-template"}../node_modules/vue-loader/lib/loaders/templateLoader?js..?/node_modules/cache-loader/dist/cjs.js。 ?./node_modules/vue-loader/lib/index.js?.:/src/views/pages/Login,vue:vue&type=template&id=07b13bd8& (34:js.23). ?97:73) 在 invokeWithErrorHandling (vue .esm.js.a026?1863) 在 HTMLButtonElement:invoker (vue.esm.js.a026.2184) 在 HTMLButtonElement?original:_wrapper (vue.esm.js?a026:7565

)

 Login.vue

    <template>
    <div id="login">
      <CContainer class="d-flex content-center min-vh-100">
        <CRow>
          <CCol>
            <CCardGroup>
              <CCard class="p-4">
                <CCardBody>
                  <CForm>
                    <h1>Login</h1>
                    <p class="text-muted">Sign In to your account</p>
                    <CInput
                     name:username
                      placeholder="Username"
                      autocomplete="usernameemail"
                    >
                      <template #prepend-content><CIcon name="cil-user"/></template>
                    </CInput>
                    <CInput
                     name:password
                      placeholder="Password"
                      type="password"
                      autocomplete="curent-password"
                    >
                      <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                    </CInput>
                    <CRow>
                      <CCol col="6" class="text-left">
                        <CButton color="primary" class="px-4" @click="check(this.CForm)">Login</CButton>
                      </CCol>
                      <CCol col="6" class="text-right">
                        <CButton color="link" class="px-0">Forgot password?</CButton>
                        <CButton color="link" class="d-md-none">Register now!</CButton>
                      </CCol>
                    </CRow>
                  </CForm>
                </CCardBody>
              </CCard>
              <CCard
                color="primary"
                text-color="white"
                class="text-center py-5 d-sm-down-none"
                body-wrapper
              >
                <h2>Sign up</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <CButton
                  color="primary"
                  class="active mt-3"
                >
                  Register Now!
                </CButton>
              </CCard>
            </CCardGroup>
          </CCol>
        </CRow>
      </CContainer>
    </div>
    </template>

    <script type="text/javascript">
    export default {
      name: 'Login',
    methods:{
                check(CForm){
               if (CForm.username.value=="demon" && CForm.password.value=="pwr") {
                  window.open("Dashboard.vue")
                } else {
                  alert("wrong email and password")
                }
                }
             }
     }
    </script>

Answer 1

您無法使用 window.open (url) 打開視圖。

您可以使用 axios（或類似名稱）在您的服務器上請求身份驗證。

單擊登錄按鈕時：將登錄名和密碼與 Axios 發送到服務器身份驗證端點（例如：www.yourserver/login/connect.php），以 POST 模式。

您的服務器將需要對您進行身份驗證並返回響應。 在視圖中，可以在請求的回調部分測試答案：為此提供了一個方法。

如果成功：訪問您的儀表板頁面（window.open（“www.Yourserver/dashboard.php”）。

注意：dashboard.php 必須驗證你是否真的被授權。

如果您使用 spa 邏輯（單頁應用程序）。 您將使用 vueroute 並且可能使用 vuex.js。

我認為您需要深化概念 vue.js / spa 應用程序 / 登陸頁面 / vueroute.js / vuex.js / axios （或類似）。 祝你好運。