默认路由
在Vue项目里，路由组件需要通过router-link进行加载
不手动点击router-link则无法访问路由组件，那么需要设置被访问的路由组件为默认路由
<div id="adds">
<router-link to="/register">注册</router-link>
<router-link to="/login">登录</router-link>
<hr style="color: aqua;">
<router-view></router-view>
</div>
<template id="register">
<h1>注册页面</h1>
</template>
<template id="login">
<h1>登陆页面</h1>
</template>
<!--suppress JSAnnotator -->
<script>
let registercopt = {
template:'#register',
}
let logincopt ={
template: "#login"
}
let sdfg = new VueRouter({
routes:[
{
name:'register',
path:'/register',
component:registercopt
},
{
name:'login',
path:'/login',
component:logincopt
},
{
path: '/',
redirect:'/login'
}
]
})
new Vue({
el:'#adds',
components:{
registercopt,logincopt
},
router:sdfg
})
</script>
路由嵌套
<div id="adds">
<router-link to="/register">注册</router-link>
<router-link to="/login">登录</router-link>
<hr style="color: aqua;">
<router-view></router-view>
</div>
<template id="register">
<div>
<h1>注册页面</h1>
<router-link to="/tel">手机号注册</router-link>
<router-link to="/email">邮箱号注册</router-link>
<router-view></router-view>
</div>
</template>
<template id="login">
<h1>登陆页面</h1>
</template>
<template id="telid">
<h1>手机号注册页面</h1>
</template>
<template id="emailid">
<h1>邮箱号注册页面</h1>
</template>
<!--suppress JSAnnotator -->
<script>
let registercopt = {
template:'#register',
}
let logincopt ={
template: "#login"
}
let telcopt ={
template: "#telid"
}
let emailcopt ={
template: "#emailid"
}
let sdfg = new VueRouter({
routes:[
{
name:'register',
path:'/register',
component:registercopt,
children:[
{
path:'/tel',
component:telcopt,
},
{
path: '/email',
component: emailcopt,
}
]
},
{
name:'login',
path:'/login',
component:logincopt,
},
{
path: '/',
redirect:'/login'
}
]
})
new Vue({
el:'#adds',
components:{
registercopt,logincopt
},
router:sdfg
})
</script>
