vue学习笔记：路由vue-router的使用，路由传递数据
在使用vue-router之前要先引入:
cnpm/npm install vue-router --save
引入之后就可以在组件之间使用路由进行跳转，首先建立两个组件titleHeader和homeHeader，和他们下面的内容路由文件titleContent和homeContent，再然后在main.js中引入vue-router,
import VueRouter from 'vue-router'Vue.use(VueRouter)
然后进行配置路由：
第一步：创建组件
import titleHeader from './components/titleHeader'import homeHeader from './components/homeHeader'import homeContent from './components/homeContent'import titleContent from './components/titleContent'
第二步：定义路由
const routes = [{path:'/titleHeader',component:titleHeader},{path:'/homeHeader',component:homeHeader},{path:'/homeContent/:aid',component:homeContent},{path:'/titleContent',component:titleContent},{path:'*',redirect:'/homeHeader'} //如果没有找到路由，则跳转的默认路由]
第三步：实例化VueRouter
const router = new VueRouter({routes //等同于routes:routes格式})
第四步：挂载实例
new Vue({el: '#app',router,components: { App },template: '<App/>'})
第五步：模板挂载
在app.vue中挂载路由出口，用来显示组件
<router-view></router-view>
结合router-link进行显示，或者跳转到各自的内容组件，
<template><div id="app"><div class="top"><router-link to="/titleHeader">标题头部组件</router-link><router-link to="/homeHeader">首页头部组件</router-link></div><hr><router-view></router-view></div></template>
以homeHeader为例，代码如下：
<template><div id="homeHeader"><ul><li v-for="(item,key) in list"><router-link :to="/homeContent/+key">{{key}}----{{item}}</router-link></li></ul></div></template><script>export default {data(){return{msg:'这是一个头部首页组件',list:['111','222','333']}},methods:{}}</script><style></style>
在内容组件homeContent中可以获取homeHeader传递过来的数据，通过$route.params或者是get方法时的$route.query,这使得路由是动态的路由，可以根据在homeHeader中列表点击的索引进行动态传值，路由配置如下：
{path:'/homeHeader',component:homeHeader},{path:'/homeContent/:aid',component:homeContent},
如果访问的路由不存在，可已设置一个人默认的路由跳转地址，放置页面出现空的情况：
{path:'*',redirect:'/homeHeader'}
以上就是vue-router基本用法，有什么疑问或者是我说的不对的地方欢迎评论一起探讨。
一时失言乱红尘
怼烎@
Myth丶恋晨
忘是亡心i
小鱼儿
￡神魔★判官ぃ
还没有评论，来说两句吧...