Vue学习(9)————————Vue路由，设置请求头，动态路由(路由传值，get传值)_前端this.$http请求头放哪

作者：繁依Fanyi0 | 2024-03-23 10:28:17

踩

前端this.$http请求头放哪

简述

之前都是手动的网跟组件中引入其他组件（import），路由的作用就是让他自动挂载组件组成界面

1.安装

npm install vue-router --save / cnpm install vue-router --save

2、引入并 Vue.use(VueRouter) (main.js)

import VueRouter from 'vue-router'

Vue.use(VueRouter)


//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue';
import App from './App';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
//并使用插件
Vue.use(VueResource);
Vue.use(VueRouter);
new Vue({
	el:'#app',
	render: h => h(App)
})

3、配置路由

1、创建组件引入组件

2、定义路由（建议复制s）

   const routes = [
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
     { path: '*', redirect: '/home' }   /*默认跳转路由*/
   ]

3、实例化VueRouter

   const router = new VueRouter({
     routes // （缩写）相当于 routes: routes
   })

4、挂载

  new Vue({
    el: '#app',
    router，
    render: h => h(App)
  })

  5 、根组件的模板里面放上这句话   <router-view></router-view>


import Vue from 'vue';
import App from './App.vue';
 
 
 
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
 
//1.创建组件
 
 
import Header from './components/Header.vue';
 
import News from './components/News.vue';
 
 
//2.配置路由   注意：名字
 
const routes = [
  { path: '/header', component: Header },
  { path: '/news', component: News },
 
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]
 
 
//3.实例化VueRouter  注意：名字
 
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
 
 
 
//4、挂载路由
 
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
 
 
//5 <router-view></router-view> 放在 App.vue

  6、路由跳转
  <router-link to="/foo">Go to Foo</router-link>
   <router-link to="/bar">Go to Bar</router-link>


<template>
  <div id="app">
  	<router-link to="/header">头部</router-link>
  	<router-link to="/news">新闻</router-link>
  	<hr />
  	<router-view></router-view>
  </div>
</template>
<script>
</script>
<style lang="scss">
</style>

————————————————————————————————————————————————

设置请求头（添加参数）

第一种：在Vue实例中设置


var vm = new Vue({
   el:'#rrapp',
   data:{
      showList: true,
      title: null
   },
    http: {
        root: '/',
        headers: {
            token: token
        }
    }
})

第二种：全局设置请求头（Main.js）

Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk';

第三种：在拦截器中设置


Vue.http.interceptors.push((request, next) => {
        request.headers.set('token', token); //setting request.headers
        next((response) => {
            return response
     })
})

————————————————————————————————————————————————————

动态路由（路由传值）

在main.js加入路由


//相当于引入一个工具库 并付给Vue引用
import Vue from 'vue';
import App from './App';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
//并使用插件
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.http.headers.common['token'] = 'znjtbril';
//1.创建组件
import header from './components/Header.vue';
import news from './components/News.vue';
import content from './components/Content.vue';
//2.配置路由
const routes = [
  { path: '/header', component: header },
  { path: '/news', component: news },
  { path: '/content/:keyid', component: content }, /* 动态路由 （就是个传值） 重点在这*/
 
  { path: '*', redirect: '/header' }   /*默认跳转路由*/
]
//3.实例化VueRouter
const router = new VueRouter({
	routes//引用的上面定义的
})
//4.挂载路由
//把定义好的对象扔进Vue对象里。。
new Vue({
	el:'#app',
	router,
	render: h => h(App)
})

然后再在头部组件加入跳转到详情的组件Vue


<template>
  <div>
  	<h1>我是header</h1><br/>
  	
  	<ul>
                 //这里是重点
  		<li v-for="(item ,key) in list"><router-link :to="'/content/'+key">{{key}}*----*{{item}}</router-link></li>
  	</ul>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				list:["水瓦","风丑","光犬"]
			}
		},
		methods:{
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>

然后再去详情界面去看看值


<template>
  <div>
  	<h1>我是详情页面,传过来的Key值为{{keyid}}</h1><br/>
  </div>
</template>
<script>
	export default{
      data(){
		return{
		  msg:'我是详情页面+1',
		  keyid:''
		}
	  },
	  methods:{
	  },
	  mounted(){
	  	console.log(this.$route.params); /*获取动态路由传值*/
	  	alert(this.$route.params.keyid);
	  	this.keyid = this.$route.params.keyid;
	  }
	}
</script>
<style lang="scss" scoped="scoped">
</style>

上面是Vue的配置传值，但是还可以用们一直的用在地址栏拼接参数的get传值

main.js

{ path: '/content', component: content }

header.vue


<template>
  <div>
  	<h1>我是header</h1><br/>
  	
  	<ul>
  		<li v-for="(item ,key) in list"><router-link :to="'/content?keyid='+key">{{key}}*----*{{item}}</router-link></li>
  	</ul>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				list:["水瓦","风丑","光犬"]
			}
		},
		methods:{
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>

content.vue


<template>
  <div>
  	<h1>我是详情页面,传过来的Key值为{{keyid}}</h1><br/>
  </div>
</template>
<script>
	export default{
      data(){
		return{
		  msg:'我是详情页面+1',
		  keyid:''
		}
	  },
	  methods:{
	  },
	  mounted(){
	  	console.log(this.$route.query); /*获取get传过来的值*/
	  	alert(this.$route.query.keyid);
	  	this.keyid = this.$route.query.keyid;
	  }
	}
</script>
<style lang="scss" scoped="scoped">
</style>

实际操作接口调用的代码


<template>    
    <div id="news">    
       我是新闻组件   
 
 
     <ul class="list">
        <li v-for="(item,key) in list">
             <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
        </li>
     </ul>
          
    </div>
 
</template>
 
 
<script>
 
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[]        
            }
        },
        methods:{
 
            requestData(){
 
                //jsonp请求的话  后台api接口要支持jsonp
 
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
 
                this.$http.jsonp(api).then((response)=>{
 
                   console.log(response);
 
                   //注意：用到this要注意this指向
 
                   this.list=response.body.result;
 
 
                },function(err){
 
                        console.log(err);
                })
            }
        },
        mounted(){
 
            this.requestData();
        }
    }
 
</script>


<template>
   
    <div id="content">    
        <h2>{{list.title}}</h2>
 
        <div v-html="list.content"></div>
    </div>
</template>
 
 
<script>
    
 
 
    export default{
 
        data(){
 
            return{
 
                msg:'数据',
                list:[]
            }
        },
        mounted(){
 
               // console.log(this.$route.params);  /*获取动态路由传值*/
 
                var aid=this.$route.params.aid;
 
                //调用请求数据的方法
 
                this.requestData(aid);
 
        },
        methods:{
 
            requestData(aid){
 
                //get请求如果跨域的话 后台php java 里面要允许跨域请求
 
                var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
 
 
                this.$http.get(api).then((response)=>{
                        console.log(response);
 
                        this.list=response.body.result[0];
 
                },(err)=>{
 
                    console.log(err)
                })
            }
        }
 
    }
</script>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】