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基本用法，有什么疑问或者是我说的不对的地方欢迎评论一起探讨。