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>
