一、路由器机制
在VueJS中的路由,可以通过Vue-Router来处理
- router.vuejs.org/
- vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
- vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一-些超链接来实现页面切换和跳转的。在vue-router单页面应用中, 则是路径之间的切换,也就是组件的切换。
二、路由器实现的基本步骤
1.实现路由的基本步骤
-指定一个盛放组件的容器
● < /router-view>
-创建各个组件
-配置路由词典
-访问指定路由下的组件
- 超链接
- 编程导航
2.配置路由词典
配置路由词典时,需要有vue-rou 的模块;然后引入进来,才可以配置
import Router from 'vue-router ';
Vue.use(Router);
export default new Router({routes: [
{ path: '/start',component: Start },
{ path: '/main',component: Main }
]
})
HTML(luyou1.html):
必须引进:
添加:
Vue实例添加:
router
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="Index.js"></script>
<script src="Details.js"></script>
<script src="router.js"></script>
<script src="Myheader.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
<router-view></router-view>
</div>
<script>
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
首页Index.js:
var Index={
template:`<h1 style="color:red">这里是首页</h1>`
}
详情页Details.js:
var Details={
template:`<h1 style="color:orange">这里是详情页</h1>`
}
路由器router.js:
var router = new VueRouter({
routes: [
{ path: "/", component: Index },
{ path: "/details", component: Details }
]
})
页头Myheader.js:
Vue.component("my-header",{
template:`<header><h1 style="blue">这里是页头</h1> <hr>`
})
ps:有两种方式,一种是 首页和详情页通过router路由进行实现,一种是直接展现出的页头。
三、路由器跳转与路由器传参
1.路由器跳转
3种基本方式
-超链接
- router-link
-js
超链接跳转:
jump to foo自定义指令跳转:
Go to Foo
js跳转:
this.$router.push(' /foo')
接上方原来代码添加路由器跳转功能:
Vue.component("my-header",{
template:`<header>
<h1 style="blue">这里是页头</h1>
<ul>
<li><h2> </h2><a href="javascript:;" @click="logout">注销</a></li>
<li><a href="#/">首页</a></li>
<li><router-link to="/details">详情页</router-link></li>
</ul>
<hr>
</header>`,
methods:{
logout(){
alert("注销成功,即将自动返回首页");
this.$router.push('/');
}
}
})
2.路由器传参
基本步骤
-明确发送方、接收方一配置接收方的路由-发送参数 -明确发送方、接收方一配置接收方的路由-发送参数
配置接收方路由:
{ path: '/detail/:id', component: Detail }接受参数:
this.$route.params.id发送参数:
this.$router.push( /detail/ + id)
接上方原来代码添加路由器传参功能:
主页显示跳转传参ID进行相对于的商品信息
var Index={
template:`<div>
<h1 style="color:red">这里是首页</h1>
<ul>
<li><router-link to="/details/1">查看1号商品详情</router-link></li>
<li><a href="javascript:;" @click="goToDetails(5)">查看5号商品详情</a></li>
<li><router-link to="/details/13">查看13号商品详情</router-link></li>
</ul>
</div>`,
methods:{
goToDetails(lid){
this.$router.push(`/details/${lid}`)
}
}
}
显示相对于的数字商品ID信息
var Details={
template:`<div>
<h1 style="color:orange">这里是详情页</h1>
<h2>查看{{lid}}号商品的详细信息</h2>
</div>`,
data(){
return{
lid:0
}
},
created(){
this.lid=this.$route.params.lid;
}
}
路由器添加传参ID进行相对于跳转
var router = new VueRouter({
routes: [
{ path: "/", component: Index },
{ path: "/details/:lid", component: Details },
{ path: "*", component: NotFound }
]
})
注意:引入的js子类要在父类上方
四、路由器嵌套与vue-resource
1.路由器嵌套
基本步骤
-在父组件中,指定上router-view用来盛放子组件
-在配置父组件的路由地址时,指定上children属性
const routes= [
{ path: '/user', component: User,
children: [
{path: 'profile', component: UserProfile },{path:‘post’,component:UserPosts}]
}]
接上方原来代码添加路由器嵌套功能:
添加嵌套Home.js:
var Home={
template:`
<div>
<my-header></my-header>
<router-view></router-view>
</div>
`
}
更改路由,设置进入Home的children为子集,页头添加Index和Details两个页面
var router = new VueRouter({
routes: [
{ path: "/", component: Home,children:[
{ path: "/", component: Index },
{ path: "/details/:lid", component: Details },
] },
{ path: "*", component: NotFound }
]
})
Index和Details两个页面显示页头,404则不显示页头。
2.vue-resource
VueResource 介绍
· VueJS的生态圈里除了Vue-Route之外,还有很多的插件,在网络请求中,vue是借助于vue-resource模块来进行异步请求、跨域请求
· vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件—样也能做到,而且vue-resource的API更为简洁。
特点:
-1.体积小
. vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小 。
-2.支持主流的浏览器
.和Vue.js一样,vue-resource除了不支持IE9以下的浏览器,其他主流的浏览器都支持。
-3.支持Promise API和URI Templates
.Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
URl Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
-4.支持拦截器
.拦截器是全局的,拦截器可以在请求发送前和发送请求做一些处理。拦截器在一些场景下会非常 有用,比如请求发送前在headers中设置access token,或者在请求失败时,或者在请求失败时,提供共通的处理方式。
五、vue-resource使用步骤与拦截器
一、vue-resource使用步骤
VueResource使用步骤
-安装vue-resource
·npm install --save vue-resource
-引入vue-resource模块
·import VueResource from 'vue-resource'
·Vue.use(VueResource);
一调用模块中http.get( 'url")**
·.then(function(response){
·})
vue-resource在Vue中不在更新,新版本都在使用,axios。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(VueResource);
new Vue({
el:"#app",
mounted(){
//不带参数
this.$http.get("http://music.eleuu.com/search?keywords=1").then(result=>{
console.log(result.data);
})
}
})
</script>
</body>
</html>
axios使用演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.prototype.axios=axios;
new Vue({
el:"#app",
mounted(){
axios.get("http://music.eleuu.com/search?keywords=1").then(result=>{
console.log(result.data.result.songs[0])
})
}
})
// //不结合Vue
// axios.get("http://music.eleuu.com/search?keywords=1").then(result=>{
// console.log(result.data.result.songs[0])
// })
</script>
</body>
</html>
二、拦截器
Vue.http.interceptors.push((req, next)=>
{
//请求发送前的处理逻辑
next((res)=>{
//请求发送后的处理逻辑
//res参数会返回给successCallback//或errorCallback
return res ;
})
})
vue-resource拦截器实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(VueResource);
Vue.http.interceptors.push((req, next)=>
{
//请求发送前的处理逻辑
console.log(`在发送请求前拦截...`);
console.log(req);
next((res)=>{
//请求发送后的处理逻辑
//res参数会返回给successCallback
//或errorCallback
console.log(`收到响应结果...`);
console.log(res);
})
})
new Vue({
el:"#app",
mounted(){
//不带参数
this.$http.get("http://music.eleuu.com/search?keywords=1").then(result=>{
console.log(result.data.result.songs[0]);
})
}
})
</script>
</body>
</html>
axios拦截器实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/axios.min.js"></script>
</head>
<body>
<script>
var axios = axios.create();
axios.interceptors.request.use(config => {
console.log(`在发送请求前拦截...`);
console.log(config);
return config;
});
axios.interceptors.response.use(
res => {
console.log(`在收到响应后拦截...`);
console.log(res);
return res;
}
)
axios.get("http://music.eleuu.com/search?keywords=1").then(result => {
console.log(result.data.result.songs[0])
})
</script>
</body>
</html>