<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//创建app
<div id="app">
//登录和注册按钮
<router-link tag="button" to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
//占位
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>登录组件</h1>
<router-link to="/login/vip">vip</router-link>
<router-link to="/login/supervip">超级vip</router-link>
<router-view></router-view>
</div>
</template>
//引入vue和vue-router
<script src="js/vue-2.4.0.js"></script>
<script src="js/vue-router-3.0.1.js"></script>
<script>
//创建组件
let login = {
template:'#login'
}
let register = {
template:'<h1>注册组件</h1>'
}
let vip = {
template:'<h1>vip</h1>'
}
let supervip = {
template:'<h1>超级vip</h1>'
}
//创建路由实例
let router=new VueRouter({
//用routes属性
routes:[
//path 表示你要监听的路由地址
//component表示展示component对应的组件-->写的是组件模板对象的名称,不是组件名
{path:'/',redirect:'/login'},//根路径下,又重定义到/login路径所对应的页面
{path:'/login',component:login,children:[// 通过 children 数组属性,来实现路由的嵌套
{path:'/',redirect:'vip'},
// 注意,子路由的开头位置,不要加 / 路径符
{path:'vip',component:vip},
{path:'supervip',component:supervip},
]},
{path:'/register',component:register}
]
})
let vm = new Vue({
el:'#app',
data:{
},
//调用
router,
})
</script>
</body>
</html>
vue中使用路由嵌套
最新推荐文章于 2024-04-29 23:47:56 发布