背景
- 传统的路由均需要刷新网页跳转,vue-router则不用,大大提高了路由效率
- vue-resource是请求数据的插件
方法
vue-router
1.安装
npm install vue-router --save-dev
2.引用
main.js中
import VueResouce from "vue-resource"
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{path:"/pathName",component:youConponentName}
],
mode:"history" //删除路由时的 #
})
new Vue({
router,
el: '#app',
components: { App },
template: '<App/>'
})
3.template中的使用
<router-link to="/users">users</router-link>
<router-view></router-view>
vue-resource
1.安装
npm install vue-resource --save-dev
2.引用
main.js中
import VueResouce from "vue-resource"
Vue.use(VueResouce)
3.使用
使用http://jsonplaceholder.typicode.com/users的数据
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{
console.log(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 HelloWorld from './components/HelloWorld'
import Users from './components/Users'
import VueResouce from "vue-resource"
Vue.config.productionTip = false
//router 配置
Vue.use(VueRouter)
Vue.use(VueResouce)
const router = new VueRouter({
routes:[
{path:"/users",component:Users},
{path:"/",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="/users">users</router-link></li>
<router-view></router-view>
</ul>
</div>
</template>
<script>
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
data(){
return {
title:"未改变之前"
}
},
methods:{
updateTitle:function(title){
this.title = title
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
}
}
</script>
<style scoped>
h1{
color:red;
}
</style>
Users.vue
<template>
<div class="users">
<ul>
<li v-for="user in users">
<h2>{{user.name}}</h2>
<h3>{{user.email}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default{
name:"users",
data(){
return{
}
},
methods:{
},
created:function(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{
//console.log(data);
this.users = data.body;
} )
}
}
</script>
<style scoped>
.users{
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:0px;;
}
li{
flex-grow:1;
flex-basis:200px;
text-align:center;
padding:25px;
border:1px solid #222;
margin:20px;
}
</style>
HelloWorld.vue 就一句话 HelloWorld