Vue学习(9)————————Vue路由，设置请求头，动态路由(路由传值，get传值)

简述

之前都是手动的网跟组件中引入其他组件（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 、根组件的模板里面放上这句话           

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  放在 App.vue

  6、路由跳转
  Go to Foo
   Go to Bar

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

设置请求头（添加参数）

第一种：在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

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

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

main.js

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

header.vue

content.vue

实际操作接口调用的代码