2种方法创建vue登录组件，实现界面跳转和传参，组件插槽，router-link【诗书画唱】
前言：本期写了很长的时间，很详细的功能实现，很适合新手入门！干货满满！希望更多人可以多多三连！
目录：
例子3：创建一个登录组件，当点击登录按钮以后，跳转到一个欢迎页面（要自己写），
这个页面上面显示出登录页面中传过来的账号和密码的值
lint
template
vue文件中template是模板的意思，写html的代码。<script></script>中写export default，methods，点击事件绑定的函数等js的代码。下面是绑定点击事件等的方法，
组件跳转（或说是组件切换）的方式，界面跳转和传参等等的2种方法（我个人喜欢用第2种方法）。
router路由配置中和点击事件中，界面跳转中关键的是name属性的设置，比如name: 'Reg'
关于组件插槽，用来匹配插入路由配置的页面（个人理解：也就是别的组件不管怎么切换，都是会出现这个部分的代码的）
App.vue（基本都是用源码的，不用很多改动）
main.js（基本都是用源码的，不用很多改动）
科普：
插槽实质是对子组件的扩展，通过<slot>插槽向组件内部指定位置传递内容。
slot（插槽）是Vue中的特性，既然提到了组件，那么小程序中就也有插槽的特性。很幸运地，小程序中，插槽和Vue中的插槽用法大致相同。
assets
vue项目中，重复点击路由报错，即为Uncaught (in promise) Error: Avoided redundant navigation to current location:的解决方法
My_login_success.vue
My_login.vue
index.js
App.vue和main.js等等基本每个vue项目中都要用，并且没有什么大改动，请参看前面例子的代码
在代码界面上鼠标右键可以点格式化文档，就可以自动整理代码等等，个人认为比HBuilder中的整理代码的好一些
例子4：上面的题目使用两种页面跳转方式实现。
My_login2.vue
index.js
vue-router 中 router-link 与 a 标签的区别
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。
通过 router-link 进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。
例子3：创建一个登录组件，当点击登录按钮以后，跳转到一个欢迎页面（要自己写），
这个页面上面显示出登录页面中传过来的账号和密码的值
lint
template
vue文件中template是模板的意思，写html的代码。<script></script>中写export default，methods，点击事件绑定的函数等js的代码。下面是绑定点击事件等的方法，
组件跳转（或说是切换）的方式，界面跳转和传参等等的2种方法（我个人喜欢用第2种方法）。
router路由配置中和点击事件中，界面跳转中关键的是name属性的设置，比如name: 'Reg'
关于组件插槽，用来匹配插入路由配置的页面（个人理解：也就是别的组件不管怎么切换，都是会出现这个部分的代码的）
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/>'
})
科普：
插槽实质是对子组件的扩展，通过<slot>插槽向组件内部指定位置传递内容。
slot（插槽）是Vue中的特性，既然提到了组件，那么小程序中就也有插槽的特性。很幸运地，小程序中，插槽和Vue中的插槽用法大致相同。
assets
vue项目中，重复点击路由报错，即为Uncaught (in promise) Error: Avoided redundant navigation to current location:的解决方法
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
My_login_success.vue
<template>
<div>
<h1>我的登录成功页面</h1>
<h2>传过来的登录状态是：{{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>
<!-- 界面跳转方法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'//——>导入Login.vue这个文件
import Reg from '@/components/Reg'//——>导入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
}
//自己加的代码（设置跳转路径和对应路径中会使用的组件） START
/* ,
{//设置访问跳转路径http://localhost:8080/#/lg时会调用Login.vue组件：
path: '/lg',
name: 'Login',//路由跳转时使用
component: Login
},
{//设置访问跳转路径http://localhost:8080/#/reg时会调用reg.vue组件：
path: '/reg',
name: 'Reg',//路由跳转时使用
component: Reg
}*/
,
{//设置访问跳转路径http://localhost:8080/#/My_login时会调用My_login.vue组件：
path: '/My_login',
name: 'My_login',//路由跳转时使用
component: My_login//记得写加载要使用的这个组件的代码
}
,
{
//设置访问跳转路径http://localhost:8080/#/My_login_success时会调用My_login_success.vue组件：
path: '/My_login_success',
name: 'My_login_success',//路由跳转时使用
component: My_login_success//记得写加载要使用的这个组件的代码
}
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
运行
http://localhost:8080/#/My_login
App.vue和main.js等等基本每个vue项目中都要用，并且没有什么大改动，请参看前面例子的代码
例子4：上面的题目使用两种页面跳转方式实现。
方法1（见例子3）：
方法2（这里暂时简写业务逻辑等等）：
vue-router 中 router-link 与 a 标签的区别
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。
通过 router-link 进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。
My_login2.vue
<template>
<div>
<h1>我的登录页面</h1>
<!-- 界面跳转方法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
