2種方法創(chuàng)建vue登錄組件，實現(xiàn)界面跳轉(zhuǎn)和傳參，組件插槽，router-link【詩書畫唱】
前言：本期寫了很長的時間，很詳細(xì)的功能實現(xiàn)，很適合新手入門！干貨滿滿！希望更多人可以多多三連！
目錄：
例子3：創(chuàng)建一個登錄組件，當(dāng)點擊登錄按鈕以后，跳轉(zhuǎn)到一個歡迎頁面（要自己寫），
這個頁面上面顯示出登錄頁面中傳過來的賬號和密碼的值
lint
template
vue文件中template是模板的意思，寫html的代碼。<script></script>中寫export?default，methods，點擊事件綁定的函數(shù)等js的代碼。下面是綁定點擊事件等的方法，
?組件跳轉(zhuǎn)（或說是組件切換）的方式，界面跳轉(zhuǎn)和傳參等等的2種方法（我個人喜歡用第2種方法）。
router路由配置中和點擊事件中，界面跳轉(zhuǎn)中關(guān)鍵的是name屬性的設(shè)置，比如name:?'Reg'
關(guān)于組件插槽，用來匹配插入路由配置的頁面（個人理解：也就是別的組件不管怎么切換，都是會出現(xiàn)這個部分的代碼的）
App.vue（基本都是用源碼的，不用很多改動）
main.js（基本都是用源碼的，不用很多改動）
科普：
插槽實質(zhì)是對子組件的擴(kuò)展，通過<slot>插槽向組件內(nèi)部指定位置傳遞內(nèi)容。
slot（插槽）是Vue中的特性，既然提到了組件，那么小程序中就也有插槽的特性。很幸運地，小程序中，插槽和Vue中的插槽用法大致相同。
assets
vue項目中，重復(fù)點擊路由報錯，即為Uncaught (in promise) Error: Avoided redundant navigation to current location:的解決方法
My_login_success.vue
My_login.vue
index.js
App.vue和main.js等等基本每個vue項目中都要用，并且沒有什么大改動，請參看前面例子的代碼
在代碼界面上鼠標(biāo)右鍵可以點格式化文檔，就可以自動整理代碼等等，個人認(rèn)為比HBuilder中的整理代碼的好一些
例子4：上面的題目使用兩種頁面跳轉(zhuǎn)方式實現(xiàn)。
My_login2.vue
index.js
vue-router 中 router-link 與 a 標(biāo)簽的區(qū)別
<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點擊) 導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。
通過 router-link 進(jìn)行跳轉(zhuǎn)不會跳轉(zhuǎn)到新的頁面，也不會重新渲染，它會選擇路由所指的組件進(jìn)行渲染，避免了重復(fù)渲染的“無用功”。
例子3：創(chuàng)建一個登錄組件，當(dāng)點擊登錄按鈕以后，跳轉(zhuǎn)到一個歡迎頁面（要自己寫），
這個頁面上面顯示出登錄頁面中傳過來的賬號和密碼的值
lint
template
vue文件中template是模板的意思，寫html的代碼。<script></script>中寫export?default，methods，點擊事件綁定的函數(shù)等js的代碼。下面是綁定點擊事件等的方法，
?組件跳轉(zhuǎn)（或說是切換）的方式，界面跳轉(zhuǎn)和傳參等等的2種方法（我個人喜歡用第2種方法）。
router路由配置中和點擊事件中，界面跳轉(zhuǎn)中關(guān)鍵的是name屬性的設(shè)置，比如name:?'Reg'
關(guān)于組件插槽，用來匹配插入路由配置的頁面（個人理解：也就是別的組件不管怎么切換，都是會出現(xiàn)這個部分的代碼的）
App.vue（基本都是用源碼的，不用很多改動）
<template>
??<div?id="app">
????<img?src="./assets/logo.png">
????<!--?組件插槽，用來匹配插入路由配置的頁面?-->
????<router-view/>
??</div>
</template>
<script>
export?default?{
??name:?'App'
}
</script>
<style>
#app?{
??font-family:?'Avenir',?Helvetica,?Arial,?sans-serif;
??-webkit-font-smoothing:?antialiased;
??-moz-osx-font-smoothing:?grayscale;
??text-align:?center;
??color:?#2c3e50;
??margin-top:?60px;
}
</style>
main.js（基本都是用源碼的，不用很多改動）
//?The?Vue?build?version?to?load?with?the?`import`?command
//?(runtime-only?or?standalone)?has?been?set?in?webpack.base.conf?with?an?alias.
import?Vue?from?'vue'
import?App?from?'./App'
import?router?from?'./router'
Vue.config.productionTip?=?false
/*?eslint-disable?no-new?*/
new?Vue({
??el:?'#app',
??router,
??components:?{?App?},
??template:?'<App/>'
})
科普：
插槽實質(zhì)是對子組件的擴(kuò)展，通過<slot>插槽向組件內(nèi)部指定位置傳遞內(nèi)容。
slot（插槽）是Vue中的特性，既然提到了組件，那么小程序中就也有插槽的特性。很幸運地，小程序中，插槽和Vue中的插槽用法大致相同。
assets
vue項目中，重復(fù)點擊路由報錯，即為Uncaught (in promise) Error: Avoided redundant navigation to current location:的解決方法
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
My_login_success.vue
<template>
????<div>
????????<h1>我的登錄成功頁面</h1>?
?????????<h2>傳過來的登錄狀態(tài)是：{{this.$route.params.state}}</h2>?
????????<h2>傳過來的賬號是：{{this.$route.params.act}}</h2>
??????
????????<h2>傳過來的密碼是：{{this.$route.params.pwd}}</h2>
??????
????</div>
</template>
My_login.vue
<template>
??<div>
????<h1>我的登錄頁面</h1>
<!--?界面跳轉(zhuǎn)方法1:?-->
????<input?type="text"?v-model="username"?placeholder="請輸入賬號"?/>
????<input?type="password"?v-model="password"?placeholder="請輸入密碼"?/>
????<input?type="button"?value="登錄"?@click="f()"?/>
????<!--?<h2>{{?this.$route.params.state?}}</h2>?-->
??</div>
</template>
<script>
export?default?{
??/*定義username和password等變量的部分??START（不寫就會報
????Property?or?method?"username"?is?not?defined
????之類變量未定義的錯誤）*/
??data()?{
????return?{
??????username:?"",
??????password:?"",
??????state:?"",
????};
??},
??/*定義username和password等變量的部分??END*/
??methods:?{
????f:?function?()?{
??????console.log(this.username);
??????console.log(this.password);
??????console.log(this.username?==?"詩書畫唱");
??????console.log(this.password?==?"666666");
??????if?(this.username?==?"詩書畫唱"?&&?this.password?==?"666666")?{
????????this.$router.push({
??????????name:?"My_login_success",
??????????params:?{
????????????act:?this.username,
????????????pwd:?this.password,
????????????state:?"登錄成功！",
??????????},
????????});
??????}?else?if?(this.username?!=?"詩書畫唱"?||?this.password?!=?"666666")?{
????????alert("登錄失敗，請輸入正確的用戶名和密碼！");
????????//?????????this.$router.push({
????????//???????????name:?"My_login",
????????//???????????params:?{
????????//??state:?"登錄失敗，請輸入正確的用戶名和密碼！"
????????//???????????},
????????//?????????});
??????}
????},
??},
};
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?Login?from?'@/components/Login'//——>導(dǎo)入Login.vue這個文件
import?Reg?from?'@/components/Reg'//——>導(dǎo)入Reg.vue這個文件
import?My_login?from?'@/components/My_login'
import?My_login_success?from?'@/components/My_login_success'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
????{
??????path:?'/',
??????name:?'HelloWorld',
??????component:?HelloWorld
????}
????//自己加的代碼（設(shè)置跳轉(zhuǎn)路徑和對應(yīng)路徑中會使用的組件）?START
???/*?,
????{//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/lg時會調(diào)用Login.vue組件：
??????path:?'/lg',
??????name:?'Login',//路由跳轉(zhuǎn)時使用
??????component:?Login
????},
????{//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/reg時會調(diào)用reg.vue組件：
??????path:?'/reg',
??????name:?'Reg',//路由跳轉(zhuǎn)時使用
??????component:?Reg
????}*/
????,
????{//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/My_login時會調(diào)用My_login.vue組件：
??????path:?'/My_login',
??????name:?'My_login',//路由跳轉(zhuǎn)時使用
??????component:?My_login//記得寫加載要使用的這個組件的代碼
????}
????,
????{
//設(shè)置訪問跳轉(zhuǎn)路徑http://localhost:8080/#/My_login_success時會調(diào)用My_login_success.vue組件：
??????path:?'/My_login_success',
??????name:?'My_login_success',//路由跳轉(zhuǎn)時使用
??????component:?My_login_success//記得寫加載要使用的這個組件的代碼
????}
????//自己加的代碼?END
??]
})
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
運行
http://localhost:8080/#/My_login
App.vue和main.js等等基本每個vue項目中都要用，并且沒有什么大改動，請參看前面例子的代碼
例子4：上面的題目使用兩種頁面跳轉(zhuǎn)方式實現(xiàn)。
方法1（見例子3）：
方法2（這里暫時簡寫業(yè)務(wù)邏輯等等）：
vue-router 中 router-link 與 a 標(biāo)簽的區(qū)別
<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點擊) 導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。
通過 router-link 進(jìn)行跳轉(zhuǎn)不會跳轉(zhuǎn)到新的頁面，也不會重新渲染，它會選擇路由所指的組件進(jìn)行渲染，避免了重復(fù)渲染的“無用功”。
My_login2.vue
<template>
??<div>
????<h1>我的登錄頁面</h1>
<!--?界面跳轉(zhuǎn)方法2:?-->
????<!--?<input?type="text"?v-model="username"?placeholder="請輸入賬號"?/>
????<input?type="password"?v-model="password"?placeholder="請輸入密碼"?/>?-->
????<!--?<input?type="button"?value="登錄"?@click="f()"?/>?-->
????<button>
??<router-link?:to="{name:'My_login_success',
??params:{act:'詩書畫唱',?pwd:?'666666',state:?'登錄成功！',}}">
??登錄</router-link>
??</button>
????<!--?<h2>{{?this.$route.params.state?}}</h2>?-->
??</div>
</template>
<style?>
?a{
????text-decoration:?none;
????color:blue;
??}
?
</style>
//?<script>
//?export?default?{
//???/*定義username和password等變量的部分??START（不寫就會報
//?????Property?or?method?"username"?is?not?defined
//?????之類變量未定義的錯誤）*/
//???data()?{
//?????return?{
//???????username:?"",
//???????password:?"",
//???????state:?"",
//?????};
//???},
//???/*定義username和password等變量的部分??END*/
//???methods:?{
//?????f:?function?()?{
//???????console.log(this.username);
//???????console.log(this.password);
//???????console.log(this.username?==?"詩書畫唱");
//???????console.log(this.password?==?"666666");
//???????if?(this.username?==?"詩書畫唱"?&&?this.password?==?"666666")?{
//?????????this.$router.push({
//???????????name:?"My_login_success",
//???????????params:?{
//?????????????act:?this.username,
//?????????????pwd:?this.password,
//?????????????state:?"登錄成功！",
//???????????},
//?????????});
//???????}?else?if?(this.username?!=?"詩書畫唱"?||?this.password?!=?"666666")?{
//?????????alert("登錄失敗，請輸入正確的用戶名和密碼！");
?????
//???????}
//?????},
//???},
//?};
</script>
index.js
運行
http://localhost:8080/#/My_login2
