2018-09-24 路由

路由 單頁面的自我轉(zhuǎn)換

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="nb">
        <router-link to="/home">首頁</router-link>
        <router-link to="/index">尾頁</router-link>
        <router-view></router-view>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var jion={
            template:`
            
                <h1>這是首頁</h1> 
            
             `
        }
        var jick={
            template:`
                <div>
                <h1>這是尾頁</h1>
<ul>
<li>
    <router-link to="/index/jon">自負也</router-link>
    </li>
<li>
    <router-link to="/index/joon">自戀也</router-link>

    </li>
    </ul>
                </div>
            
        `
        }
        const routes=[
            {path:"/home",component:jion},
            {path:"/index",component:jick,
            children:[
                 {path:"jon",component:jion},
            {path:"joon",component:jick,}
            ]},
            

        ]
        const router= new VueRouter({
            routes:routes
        })
        new Vue({
            el:".nb",
            router:router
        })
    </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 路由的理解: 路由:vue-routervue的核心插件vue-router.jsnpm install vuen...
    Rascar閱讀 207評論 0 0
  • 1.簡單實例 vue的核心插件,可創(chuàng)建單頁面應(yīng)用又叫SPA(SIWGLE PAGE APPLICATIDN)應(yīng)用V...
    簡單浪閱讀 273評論 0 0
  • 1.路由:vue-routervue的核心插件根據(jù)不同的url訪問不同的頁面創(chuàng)建單頁面SPA(SINGLE PAG...
    Alive_92dc閱讀 198評論 0 0
  • 首先明白路由是什么? 路由是vue里面的一個核心插件 路由的作用是什么? 嵌套的路由/視圖表模塊化的、基于組件的路...
    慎獨_AB閱讀 113評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,545評論 19 139

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