vue.js入门（24）路由和Http

我们之前实现的页面跳转，都是通过<a>标签来进行页面跳转的

路由所实现的功能是一样的，只是a标签要一直刷新请求，而路由是直接跳转到页面去，更加优化

要使用路由，首先要安装路由

npm install vue-router --save

（我这里弹出了一堆警告找了很多方法都没有解决就暂时先跳过去了，不是error好像并不影响使用）

然后我们在main.js文件中引入路由

import VueRouter from 'vue-router'

然后我们使用这个router

Vue.use(VueRouter)

注明使用之后，我们就可以开始配置路由了，我们需要给它创建一个对象

const router=new VueRouter({
	routes:[
		{path:"/",component:Home},
		{path:"/helloworld",component:HelloWorld}
	],
	mode:"history"
})

对象里面的参数都是固定的，注意，component这里是没有s的，path是路径，component是组件

然后，我们按照所写的，把helloworld和home引进来

import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

然后我们要vue对象里面使用router

new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

因为之前创建的user.vue、footer.vue、header.vue都是app.vue文件，但app.vue文件另有用处，所以我们new一个home.vue文件，然后我们把app.vue文件里面的内容拷贝过去，将里面的import引入的文件路径改为正确之后，我们把app.vue文件里面那些多余的属性清空一下

<template>
  <div id="app">
 	
   
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
  return{
  	
  }},
  components:{
	},
  methods:{ 
  }
}
</script>

<style scoped>
</style>

类似于一个只有三个模块的空文件

现在基本上是完成了，但是不知道应该在什么地方展示，所以我们回到app.vue文件里面，在template模块展示

<template>
  <div id="app">
 	<router-view></router-view>
  </div>
</template>

这个时候我们就能显示出页面了

然后下面我们来提及一下

mode:"history"

这个的功能，我们先把template模块再加两个标签

<template>
  <div id="app">
 	<ul>
 		<li><router-link to="/">home</router-link></li>
 		<li><router-link to="/helloworld">helloworld</router-link></li>
 	</ul>
 	<router-view></router-view>
  </div>
</template>

我们先把mode：“history”删掉

这个#是系统自己带的，输入localhost：8081就会自动出现这个，helloworld也同理

使用mode：“history”就可避免这个现象

解释如该回答：https://segmentfault.com/q/1010000010024213/a-1020000010024392

这个时候我们补充一下另一个知识点，首先在app.vue文件template模板中加入四个连接

<template>
  <div id="app">
 	<ul>
 		<li><router-link to="/">home</router-link></li>
 		<li><router-link to="/helloworld">helloworld</router-link></li>
 		
 		<a href="/">homea</a>
 		<a href="/helloworld">helloworlda</a>
 	</ul>
 	<router-view></router-view>
   
  </div>
</template>

然后我们发现，点击a标签的时候，无论是自身网页，还是别的网页链接，都会发生网页刷新

这个刷新符号会变成叉叉，表示正在刷新中

而点击前两个router-link连接，页面直接跳转，并没有发生刷新现象

http请求 vue-resource

首先要安装下vue-resource资源

npm install vue-resource --save

然后就会把vue-resource安装在该模块下

在main.js文件引入vue-resource

import VueResource from 'vue-resource'

下面调用一下，基本上和路由引入是一样的流程

Vue.use(VueResource)

然后就可以在任何一个组件中，使用http了

然后我们去到user.vue文件，把user里面的数组数据全部删掉

然后我们到这个网站http://jsonplaceholder.typicode.com/users使用里面的数据

因为要在网页创建前获取数据，这里就用created生命周期的函数

created(){
    this.$http.get("http://jsonplaceholder.typicode.com/users")
    .then((data)=>{this.user=data.body;})
  }

获取这个数据后，可以从控制台看到，数据是在body里

然后我们让自定义的数组user获取data.body的值，这个data也是固定的

这个时候便可以呈现出页面效果了

附上所有修改过的完整代码

//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 VueResource from 'vue-resource' 
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'  

//import User from './components/User'

Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)

//Vue.component("user", User);

//配置路由
const router=new VueRouter({
	routes:[
		{path:"/",component:Home},
		{path:"/helloworld",component:HelloWorld}
	],
	mode:"history"
})

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

//App.vue

<template>
  <div id="app">
 	<ul>
 		<li><router-link to="/">home</router-link></li>
 		<li><router-link to="/helloworld">helloworld</router-link></li>
 		
 		<a href="/">homea</a>
 		<a href="/helloworld">helloworlda</a>
 	</ul>
 	<router-view></router-view>
   
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
  return{
  	
  }},
  components:{
	 
	},
  methods:{
	 
  }

}
</script>

<style scoped>


</style>

//Home.vue

<template>
  <div id="home">
 
  <appheader v-on:titlechange="updatetitle($event)" v-bind:sendhea="sendmessage"></appheader>
  <user></user>

  <appfooter></appfooter>
   
  </div>
</template>

<script>

import User from './User'
import Header from './Header'
import Footer from './Footer'

export default {
  name: 'home',
  data(){
  return{
  	sendmessage:"传值用法，string，number，boolean"
  }},
  components:{
	  "user":User,
	  "appheader":Header,
	  "appfooter":Footer,
	},
  methods:{
	  updatetitle(cha)
	  {
	  	this.sendmessage=cha;
	  }
  }

}
</script>

<style scoped>




</style>

//User.vue

<template>
  <div class="user">
  <h1>user hello</h1>
  	<ul>
  		<li v-for="user in user" >
  			<h2>{{ user.name }}</h2>
  			<h3>{{ user.email }}</h3>
  		 
  		</li>
  		<button v-on:click="deleteuser">删除</button>
  	</ul>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
     user:[
    
     ]
    }
  },
  methods:{
  deleteuser:function()
  {
  	this.user.pop();
  }
  },
  created(){

    this.$http.get("http://jsonplaceholder.typicode.com/users")

    .then((data)=>{this.user=data.body;})
  }
}
</script>

<style scoped>
h1
{
	color:green;
}
.user
{
	width:100%;
	max-width:1200px;
	margin:40px auto;
	padding:0 20px;
	box-sizing:border-box;
}
ul{
	display:flex;
	flex-wrap:wrap;
	list-style-type:none;
	padding:0;

}
li
{
	flex-grow:2;
	flex-basis:200px;
	text-align:center;
	padding:30px;
	border:solid 1px black;
	margin:10px;
}
</style>

vue.js入门（24）路由和Http

猜你喜欢