直接案例说明吧。。。。。
html代码
<body>
<div id="app" class="container">
<ul class="nav">
<li class="nav-item">
<router-link to="/toutiao" class="nav-link">头条</router-link>
</li>
<li class="nav-item">
<router-link to="/user" class="nav-link">用户信息</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<!-- 头条的模板 -->
<template id="toutiao">
<div class="jumbotron">
<h1 class="display-3">这是头条</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content
or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</template>
<!-- 用户信息的模板 -->
<template id="user">
<div class="jumbotron">
<h1 class="display-3">用户信息</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content
or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
<hr>
<ul class="nav">
<li class="nav-item">
<router-link to="/user/login" class="nav-link">登录</router-link>
</li>
<li class="nav-item">
<router-link to="/user/register" class="nav-link">注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<!-- 登录模板 -->
<template id="login">
<div class="jumbotron">
<h1 class="display-3">这是登录页面</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content
or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
</div>
</template>
<!-- 注册模板 -->
<template id="register">
<div class="jumbotron">
<h1 class="display-3">这是注册页面</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content
or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
</div>
</template>
</body>
js代码
const routes = [{
path: '/toutiao',
component: {
template: '#toutiao'
}
},
{
path: '/user',
component: {
template: '#user'
},
children:[
{
path:'login',
component:{
template:'#login'
}
},
{
path:'register',
component:{
template:'#register'
}
},{
path:'/',
redirect:'login'
}
]
},{
path:'*',
redirect:'/toutiao'
}
];
//ES6的结构赋值
const router = new VueRouter({
routes
});
new Vue({
el:'#app',
router
})