vuedemo\src\router
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/Home'
import Monitor from '@/Monitor'
import Setting from '@/Setting'
import Explore from '@/Explore'
import My from '@/My'
import User from '@/User'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/monitor', name: 'Monitor', component: Monitor },
{ path: '/setting', name: 'Setting', component: Setting },
{ path: '/explore', name: 'Explore', component: Explore },
{ path: '/my', name: 'My', component: My },
{ path: '/user/:id', name: 'User', component: User }
]
动态路由匹配
src\User.vue
<template>
<div>
User {{ $route.params.id }}
</div>
</template>
<script>
export default {
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
console.log('from:', from)
console.log('to:', to)
}
}
}
</script>
