简述

之前都是手动的网跟组件中引入其他组件(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>

 

Logo

前往低代码交流专区

更多推荐