父子路由(路由的巢狀)
阿新 • • 發佈:2018-12-15
在VueRouter的例項中的routes裡的物件中,除了path,component還有一個children屬性,可以在其中來設定子路由的指向與跳轉等
注意:因為已經是在其中指明,所以子路由中的path不需要加字首 '/'
<template id="home"> 建立元件 <div> <h1>我是主頁</h1> <router-link to="/home/login">登陸</router-link> <router-link to="/home/reg">註冊</router-link> <router-view></router-view> </div> </template> <div id="app"> <router-link to="/home">主頁</router-link> 跳轉/home地址 <router-view></router-view> </div> <script> var login={ 建立元件物件 template:'<p>我是登陸</p>' } var reg={ template: '<p>我是註冊</p>' } var home={ 建立元件物件賦指引到#home template:'#home' } var rtobj=new VueRouter({ routes:[ { path:'/home', component:home, children:[ {path:'login',component: login}, {path:'reg',component:reg} ]}, ], }) var vm=new Vue({ el:'#app', router:rtobj, }) </script>