Vue前端页面跳转,登录成功跳转页面
在以往不用框架的时候,我通常是通过href,或者重定向进行跳转。对于vue,他有专门的router路由进行跳转。所以第一步,我们要像python一样,在npm中安装并且在项目中引用他思路:用户点击登录后,跳转到Index.vue界面我的默认页面是SignIn.vue,是登录页面SignIn.vue Index.vue这个页面我还没有画,我先画个原型图(等我2分钟).........
·
在以往不用框架的时候,我通常是通过href,或者重定向进行跳转。
对于vue,他有专门的router路由进行跳转。
所以第一步,我们要像python一样,在npm中安装并且在项目中引用他
思路:
用户点击登录后,跳转到Index.vue界面
我的默认页面是SignIn.vue,是登录页面
SignIn.vue
Index.vue
我刚刚干了什么(可以跳过)?
这个页面我还没有画,我先画个原型图(等我2分钟)
代码写完了,我觉得下面没有必要,到多少页,业务不需要,所以删了,
另外内容封面,名字在上面太丑,放到下面了。这是画完的网站图
附送界面代码
框架我用的vue+bootstrap
先看我的main.js
import Vue from 'vue'
import VueCookies from 'vue-cookies'
import Index from './Index.vue'
import "./bootstrap-3.4.1-dist/css/bootstrap.css"
Vue.use(VueCookies)
new Vue({
render: h => h(Index),
}).$mount('#app')
Index.vue
<template>
<div id="app" style="margin-left: 5%;margin-right: 5%;border: 3px solid red;">
<!-- 标题 -->
<div id="top_welcome" style="width: 100%px;height: 60px;border: 2px solid blue;"><h3>欢迎尾号为1268的大神</h3></div>
<!-- 过滤搜索栏 -->
<div id="top_filter" style="width: 100%px;height: 40px;border: 2px solid green;">
<div id="top_filter_button" style="width: 30%px;height: 40px;
border: 1px solid purple;float: left;;">
<input style="margin-right: 10px;" type="button" class="btn btn-primary" value="全部作品">
<input style="margin-right: 10px;" type="button" class="btn btn-success" value="我的作品">
</div>
<div id="top_filter_search" class="input-group col-md-3" style="margin:1px; positon:relative" >
<input type="text" class="form-control"placeholder="请输入搜索内容(作品名 或 作者)"/>
<span class="input-group-btn">
<button class="btn btn-info btn-search" style="background-color: purple;">搜索</button>
</span>
</div>
</div>
<!-- 主体 -->
<div id="content" style="width: 100%px;height: 500px;margin-top: 5px;border: 5px solid green;">
<div id="content_project" style="width: 100%px;height: 350px;margin: 10px;border: 2px solid purple;float: left;">
<div style="width: 120px;height: 150px;margin: 10px;border: 2px solid red;float: left;">
<img alt="Vue logo" style="width: 60;height: 100px;" src="./assets/logo.png">
<div style="width: 20;height: 45px;border: 2px solid blue;">
<b>贪玩蓝月</b>
<p>渣渣辉</p>
</div>
</div>
<div style="width: 120px;height: 150px;margin: 10px;border: 2px solid red;float: left;">
<img alt="Vue logo" style="width: 60;height: 100px;" src="./assets/logo.png">
<div style="width: 20;height: 45px;border: 2px solid blue;">
<b>篮球小王子教学</b>
<p>蔡徐坤</p>
</div>
</div>
<div style="width: 120px;height: 150px;margin: 10px;border: 2px solid red;float: left;">
</div>
<div style="width: 120px;height: 150px;margin: 10px;border: 2px solid red;float: left;">
</div>
</div>
<div id="content_page_limit" style="width: 100%;height: 60px;border: 2px solid green;float: left;">
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
components: {
},data(){
return {
}}
,methods:{
}
}
</script>
<style>
</style>
跳转router
下载安装router,npm
npm install vue-router
创建router目录和index.js文件
router配置下的index.js配置
index.js
这下面的componet:()=>import指向的是,我上面那个(欢迎尾号xxx的大神)这个vue页面
import Vue from 'vue'
import VueRouter from 'vue-router'
//调用 Vue.use()函数,把VueRouter 安装为Vue的插件
Vue.use(VueRouter);
//向外共享路由的实例对象
export default new VueRouter({
//这个就是路由项目配置,如果有多个,请用,隔开。用{}加上多个跳转地址
routes:[
{
path: 'index1',
name: 'index1',
component: ()=>import('../../src/Index.vue')
}
]
})
我这写了一个页面。主要的跳转代码
router-view(是必须存在,否则跳转后将不显示)
router-link 是跳转标签
测试
更多推荐
已为社区贡献10条内容
所有评论(0)