<!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中使用路由嵌套
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章