路由 嵌套

1)頁(yè)面跳轉(zhuǎn)

<body>
        <a></a>
        <div id="app">
        <router-link to='/ct'>首頁(yè)</router-link>
        <router-link to='/xct'>用戶頁(yè)</router-link>
        <router-view></router-view>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var Ct={
                template:`
                    <h1>這是ct</h1>
                `
            }
            var Xct={
                template:`
                    <h1>這是xct</h1>
                `
            }
            const ss=[
                {path:'/',component:Home},
                {path:'/ct',component:Ct},
                {path:'/xct',component:Xct}
            ]
            const router=new VueRouter({
                routes:ss,
            })
             new Vue({
                el:'#app',
                router:router
            })  
        </script>
    </body>

2）嵌套
<body>
  <div id='app'>
   <!--1.-->
   <router-link to='/index'>首頁(yè)</router-link>
   <router-link to='/user'>用戶頁(yè)</router-link>
   <router-view></router-view>
  </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>
   <script>
       //2.創(chuàng)建組件
       var  Index={
           template:`
             <h1>這是首頁(yè)</h1>
           `
       }
       var User={
           template:`
           <div>
             <h1>這是用戶頁(yè)</h1>
             <ul>
               <li>
                  <router-link to='/user/regist'>注冊(cè)</router-link>
               </li> 
                <li>
                  <router-link to='/user/login'>登錄</router-link>
               </li>
            </ul>
            <router-view></router-view>
           </div>
         `
       }
       
       
       var Regist={
           template:`
             <h3>這是注冊(cè)頁(yè)</h3>
          `
       }
       
        var Login={
           template:`
             <h3>這是登錄頁(yè)</h3>
          `
       }
       
       //3.配置路由
       const routes=[
           {path:'/',component:Index},
           {path:'/index',component:Index},
           {
               path:'/user',
               component:User,
               children:[
                   {path:'regist',component:Regist},
                   {path:'login',component:Login}
               ]
           }
       ]
       
       //4.創(chuàng)建路由實(shí)例
       const router=new VueRouter({
           routes:routes
       })
       
       //5.把路由實(shí)例掛載到vue實(shí)例上
      new Vue({
          el:'#app',
          router:router//注冊(cè)路由
      })
  script>
</body>
</html>

嵌套剛學(xué)感覺思路混亂......
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容