vue router 參數獲取通常是通過$route.query和$route.params方法這里將這兩種方式通過代碼展示出來：
路由代碼：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import UserAdd from './components/UserAdd'
import UserList from './components/UserList'
import Detail from './components/UserDetail'
// import Login from './components/Login'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta:{
needLogin:true
},
children: [
{
path: 'add',
component: UserAdd
},
{
path: 'list',
component: UserList
},
{
path: 'detai/:id',
//這里可以通過$route.params獲取路由參數
component: Detail
},
{
path: 'detai',
component: Detail
}
]
},
]
})
用戶列表代碼：
<template>
<div>
<ul>
<li>
<router-link to="detai?id=1">用戶1</router-link> // 這里可以通過$route.query獲取路由參數
</li>
<li>
<router-link to="detai?id=2">用戶2</router-link> // 這里可以通過$route.query獲取路由參數
</li>
<li>
<router-link to="detai/3">用戶3parames</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
詳情頁代碼：
<template>
<div>
<div>
detail
{{this.$route.query.id}} //通過this.$route.query.id
{{this.$route.params.id}}// 通過this.$route.params.id
</div>
</div>
</template>
<script>
export default {
mounted(){
console.log(this.$route.query.id) //這里必須有mounted函數執行否則會報錯不知道啥原因
}
}
</script>