1.在vue-router中，有两大对象被挂载到了实例this
2.$route(只读、具备信息的对象)、$router(具备函数功能)
3.查询字符串方式传递参数
1).去哪里 <router-link :to="{name:'detail'，query：｛id:1｝}">xxx</router-link>
2).路由导航设置{name:'detail',path:'/detail',组件}
3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.query.id
4.path方式传递参数
1).去哪里 <router-link :to="{name:'detail'，params:｛id:1｝}">xxx</router-link>
2).路由导航设置(path方式需要在路由规则上加上/:xxx){name:'detail',path:'/detail/id',组件}
3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.params.id
具体代码
main.js
import Vue from 'vue'
import App from './App'
import vueRouter from 'vue-router'
import list from './components/list.vue'
import listinfo from './components/listinfo.vue'
Vue.config.productionTip = false
Vue.use(vueRouter);
Vue.component("list",list);
Vue.component("listinfo",listinfo);
let router=new vueRouter({
routes:[
{name:"lis",path:"/list",component:list},
{name:"listinfo",path:"/listinfo",component:listinfo}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
list.vue
<template>
<div>
<ul>
<li v-for="(item,index) in list" :key="index">
<router-link :to="{name:'listinfo',query:{id:item.id}}"> {{item.name}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
list:[
{name:"第一",id:1},
{name:"第二",id:2},
{name:"第三",id:3},
{name:"第四",id:4},
]
}
}
}
</script>
<style>
</style>
listinfo.vue
<template>
<div>
详情
</div>
</template>
<script>
export default{
data(){
return{
}
},created(){
console.log(this.$route.query);
// console.log(this.$route.params);
},mounted(){
}
}
</script>
<style>
</style>