Vue Router 是vue的路由管理器 使用它需要创建它的实例,用router-view 路由填充(相当于占位符)的使用,举个简单的例子
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
const User = {
template:`<h1>User</h1>`
};
const Register = {
template:`<div>
<h1>Register</h1>
<hr/>
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<router-view></router-view>
</div>`
}
const tab1 = {
template:`<h1>tab1</h1>`
}
const tab2 = {
template:`<h1>tab2</h1>`
}
var router = new VueRouter({
routes:[{
path:'/',
redirect:'/user'//重定向到/user
},
{
path:'/user',
component: User
}, {
path:'/register',
component: Register,
children:[{ //子路由器
path:'/register',
redirect:'/register/tab1'
},{
path:'/register/tab1',
component:tab1
},{ path:'/register/tab2',
component:tab2}]
}
]
})
var vm = new Vue({
el:'#app',
data:{
},
router:router //挂载到vue上
})