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.vue中挂载路由出口，用来显示组件

结合router-link进行显示，或者跳转到各自的内容组件，

以homeHeader为例，代码如下：

在内容组件homeContent中可以获取homeHeader传递过来的数据，通过$route.params或者是get方法时的$route.query,这使得路由是动态的路由，可以根据在homeHeader中列表点击的索引进行动态传值，路由配置如下：

 {path:'/homeHeader',component:homeHeader},
 {path:'/homeContent/:aid',component:homeContent},

如果访问的路由不存在，可已设置一个人默认的路由跳转地址，放置页面出现空的情况：

  {path:'*',redirect:'/homeHeader'}

以上就是vue-router基本用法，有什么疑问或者是我说的不对的地方欢迎评论一起探讨。