<script>
//组件
const Home = {
template:'<h3>我是主页</h3>'
};
const Users = {
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link to="/users/teemo">teemo</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
}
const About = {
template:'<h3>我是关于</h3>'
}
const Teemo={
template:'<div>提莫</div>'
}
//配置路由
const routes = [
{path:'/home', component :Home},
{
path:'/users',
component:Users,
children:[{path:'teemo',component:Teemo}]
},
{path:'/about',component:About},
//404重定向
{path:'*',redirect:'/home'}
]
//生成路由实例
const router = new VueRouter({
routes
})
//挂载到vue上
new Vue({
router,
el:'#box'
})
</script>