vue的动态路由

1.安装

npm install vue-router --save

2.引入路由（main.js）

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.配置路由

• 创建组件引入组件
• 定义路由
• 实例化VueRouter 
• 挂载

例子：

main.js

 // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
//Vue.use(VueResource)
Vue.use(VueRouter)

//1. 创建组件

import ccc from "./components/ccc.vue";
import ddd from "./components/ddd.vue";
import detail from "./components/detail.vue";
import goods from "./components/goods.vue";
// 2.配置路由

const routes=[
  {path:'/ccc',component:ccc},
  {path:'/ddd',component:ddd},
  {path:'/detail/:id',component:detail},
  {path:'/goods',component:goods},
  {path:'*',redirect:'/ccc'}
]

//3.实例化VueRouter
const router=new VueRouter({
  routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App),
  components: { App },
  template: '<App/>'
})

ccc.vue

<template>
  <div>
    我是ccc
    <ul>
      <li v-for="(item,key) in list">
        <router-link :to="'/detail/'+key">{{key}}--{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["000", "111", "222"]
    };
  },
};
</script>
<style scoped>
</style>

detail.vue

<template>
    <div id="detail">
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },mounted(){
        console.log(this.$route.params)//得到点击用户的id,此处是点击用户的key值
    }
}
</script>
<style scoped>

</style>

页面路径：

console.log得结果：

 

ddd.vue

<template>
    <div>
        我是ddd
        <ul>
      <li v-for="(item,key) in list">
        <router-link :to="'/goods?aid='+key">{{key}}--{{item}}</router-link>
      </li>
    </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:['商品000','商品111','商品222']
        }
    }
}
</script>
<style scoped>

</style>

goods.vue

<template>
    <div id="goods">
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },mounted(){
        console.log(this.$route.query)//获取点击的用户的aid,此处id就是当前点击的key值
    }
}
</script>
<style scoped>

</style>

页面路径：

console.log结果：