Vue前端页面跳转，登录成功跳转页面

在以往不用框架的时候，我通常是通过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="#">&laquo;</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="#">&raquo;</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 是跳转标签

测试