<div>
<router-link to="/index">主页</router-link>
<router-link to="/first">子页</router-link>
<router-view></router-view>
</div>
<script src:'vue.js链接'></script>
<script src:'vue.router链接'></script>
<script>
var Index={
template:`
<h1>这是主页</h1>
`
};
var First={
template:`
<div>
<h2>这是分页</h2>
<ul>
<li>
<router-link to='/first/login?name=qwe&pass=123'>登录</router-link>
(&符可加一个或两个)
</li>
<li>
<router-link to='/first/regist/asd/456'>注册</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
};
var Login={
template:`
<div>
<h3>这是登录</h3>
<a>{{$route.query}}</a>
<a>{{$route,query.name}}</a>
<a>{{$route.query.pass}}</a>
</div>
`
};
var Regist={
template:`
<div>
<h3>这是注册</h3>
<a>{{$route.params}}</a>
<a>{{$route.params.name}}</a>
<a>{{$route.params.pass}}</a>
</div>
`
};
const routes=[
{path:'/',component:Index},
{path:'/index',component:Index},
{
path:'/first',
component:First,
childer:[
{path"login",component:Login},
{path:"regist",component:Regist}
]
}
];
const router=new VueRouter({
routes:routes,
linkActiveClass:'active'
});
new Vue({
el:'.nr',
router:router
})
</script>
