技術標籤：日記vue.js

Vue實現登入路由跳轉

• • 路由設定

html

        <div class="login-form">
            <p class="te">密碼</p>
            <div class="input-content">
            <div>
                <input type="text" autocomplete="off" placeholder="帳號" name="userName" id="userName" required />
            </div>
            <div style="margin-top: 16px">
                <input type="password" autocomplete="off" placeholder="密碼" name="password" id="password"
                        required maxlength="32" />
            </div>
            </div>
            <button id="code" class="codin" v-on:click="refresh">{{msg}}</button>
            <div>
                <input type="text" value="" placeholder="輸入驗證碼" id="text" class="enter" autocomplete="off">
            </div>
            <div id="kaiguan">
            <input type="checkbox" name="sex" id="male" class="chooseBtn" v-on:click="changestu" ref="tests"/>
            <label for="male" class="choose-label"></label>
            <p style="display:inline;margin-bottom:5px;font-size:12px;line-height:12px"> 記住我</p> 
            </div>

            <div style="text-align: center">
                <input type="button" class="enter-btn" v-on:click="check" value="登入">
            </div>
    </div>
  </div>

</div>
 

js

script>
//import func from ‘…/…/vue-temp/vue-editor-bridge’
import “@/css/main.css”
//import func from ‘…/…/vue-temp/vue-editor-bridge’;
export default {
name: ‘HelloWorld’,
data () {
return {
statu:false,
msg: ‘d9f5’,
}
},
mounted(){
var col=document.getElementById(“male”);
console.log(this.$refs.tests.style.backgroundColor);

},
methods:{
shengc(){
var code = ‘0123456789abcdefghijklmnopqrstuvwxyzQWERTYUIOPLKJHGFDSAZXCVBNM’;
var char = ‘’;
var result = ‘’;
for (var i = 0; i < 4; i++) {
var index = Math.round(Math.random() * 61);
var char = code[index];
if (result.toUpperCase().indexOf(char.toUpperCase()) > -1) {
i–;
continue;

}
result += char;
}
return result;
},
check(){
var name = document.getElementById(“userName”).value;
var pass = document.getElementById(“password”).value;

        var rand=document.getElementById("code").innerText;
        var yz=document.getElementById("text").value;

        var that=this;
            
            if(((name=='admin' && pass==123456)|| (name=='yang' && pass==666666)) && rand==yz) {
                alert('登入成功');
            this.$router.push({name:'video'});
            }else{
                if(rand!==yz){
                    alert('驗證碼錯誤');
                    setTimeout(function(){alert('重新輸入驗證碼');},1000);
                    this.refresh();
                }else if((name=='admin' && pass!==123456)||(name=='yang' && pass!==123456)){
                    alert('密碼錯誤');
                }else{
                    alert('帳號錯誤');
                }
            }
           
        
  },

refresh() {
var code = ‘0123456789abcdefghijklmnopqrstuvwxyzQWERTYUIOPLKJHGFDSAZXCVBNM’;
var char = ‘’;
var result = ‘’;
for (var i = 0; i < 4; i++) {
var index = Math.round(Math.random() * 61);
var char = code[index];
if (result.toUpperCase().indexOf(char.toUpperCase()) > -1) {
i–;
continue;
}
result += char;
}
var btn = document.getElementById(“code”);
btn.innerHTML = result;
btn.style.border=“0”;
},
changestu() {

     var col=document.getElementById("male");
     console.log(col.style);
     var that=this;
     if(col=="skyblue"){
         this.statu=!that.statu;
     }
 }

路由設定

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import video from '@/components/video'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/video',
      name: 'video',
      component:video
    }
  ]
})




###新增使用
 this.$router.push({name:'video'});