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