admin管理员组文章数量:1633926
流程
**
1.新增页面(也就是组件)并暴露出去
2.新增路由,并引入新增的页面(组件),并设置路由规则
3.在入口main.js中引用路由,并使用
4.在App.vue 中使用 路由标签
**
vue install vue-router --save-dev // 未安装路由需要执行此命令安装路由
npm i element-ui -S // 安装 element ui 楼主使用到了
项目结构:
1 新建views文件夹存放页面 ,新增页面 Login.vue
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="name">
<el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login", // 暴露此页面组件 Login
data() {
return {
form: {
name: "",
password: ""
},
rules: {
name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push("/main");
} else {
this.$message({
message:'请输入用户名密码',
type:'warning'
});
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style lang="scss" scoped>
.login-box {
width: 350px;
margin: 120px auto;
border: 1px solid #dcdef6;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 30px #dcdef6;
}
.login-title {
text-align: center;
}
</style>
2 新增路由配置,路由配置放在router 文件夹下,新建index.js
import Vue from 'vue'
import Router from 'vue-router' // 引入路由
import Login from '../views/Login' // 引入刚刚暴露出去的 页面组件 Login
import Main from '../views/Main'
Vue.use(Router); // 使用路由 必须
//配置路由 规则
export default new Router({
routes:[{
//登录页 路由
path:"/login", // 路径
name:'Login', // 名称
component:Login // 跳转页面(组件)
},
//首页路由
{
path:"/main",
name:'Main',
component:Main
}
]
})
3 .在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 VueRouter from 'vue-router' //引入路由
import router from './router' // 引入刚刚自己配置的路由信息
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(VueRouter); //使用路由
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 使用路局
render: h => h(App)
})
4 在App.vue 中添加路由使用标签
5 访问 http://localhost:8080/#/login ,就会跳到我们的Login.vue 即登录页面
新建Main.vue , 点击登录时,跳转到首页也就是 Main.vue
在index.js中 添加首页的 路由配置
在 login.vue 中添加点击登录按钮时的跳转事件方法
this.$router.push("/main");
点击登录按钮
版权声明:本文标题:Vue 页面跳转路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729176990a1188843.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论