active

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .router-link-active{
            color: #2aabd2;
        }
        li{
            list-style: none;
            float: left;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<div id='app'>
    <!--//1.-->
    <router-link to='/home'>首頁</router-link>
    <router-link to='/detail'>詳情頁</router-link>
    <!-- 盛放每個頁面對應(yīng)的內(nèi)容-->
    <router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script src="js/axios.js"></script>
<script>
    //2.創(chuàng)建組件
    var Home={
        template:`
                <h1>楊夢嬌</h1>
            `
    }

    var Detail={
        template:`
              <div>
                  <h1>小摳逼</h1>
                  <ul>
                      <li>
                         <router-link to='/detail/zhuce'>注冊</router-link>
                      </li>
                      <li>
                         <router-link to='/detail/denglu'>登錄</router-link>
                      </li>
                  </ul>
                  <table border="1" cellspacing="0" width="800px">
                      <thead>
                         <tr>
                            <th>編號</th>
                             <th>名稱</th>
                              <th>單價</th>
                              <th>數(shù)量</th>
                              <th>小計</th>
                         </tr>
                      </thead>
                      <tbody>
                         <tr v-for="w in funes">
                           <td>{{w.num}}</td>
                          <td>{{w.pname}}</td>
                          <td>{{w.price}}</td>
                          <td>{{w.count}}</td>
                          <td>{{w.sub}}</td>
                         </tr>
                      </tbody>
                  </table>
                  <router-view></router-view>
              </div>

            `,
        data:function(){
            return{
                funes:null
            }
        },
        mounted:function(){
            var self=this;
            axios({
                method:'get',
                url:'fruit.json'
            }).then(function(resp){
                self.funes=resp.data
            }).catch(function(err){

            })
        }

    }
    var Zhuce={
        template:`
        <h4>這是注冊頁面</h4>

        `
    }
    var Denglu={
        template:`
        <h4>這是登錄頁面</h4>

        `
    }


    //3.配置路由
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/detail',
            component:Detail,
            children:[
                {path:'zhuce',component:Zhuce},
                {path:'denglu',component:Denglu},

            ]
        }
    ]

    //4.創(chuàng)建一個路由實例
    const router=new VueRouter({
        routes:routes
    })

    //把路由掛在到vue實例上
    new Vue({
        el:'#app',
        router:router
    })
</script>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末繁堡，一起剝皮案震驚了整個濱河市家制，隨后出現(xiàn)的幾起案子缤剧，更是在濱河造成了極大的恐慌秃踩，老刑警劉巖鸠匀，帶你破解...
    沈念sama閱讀 211,290評論 6贊 491
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡珊泳，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門猜极，熙熙樓的掌柜王于貴愁眉苦臉地迎上來中姜，“玉大人，你說我怎么就攤上這事跟伏《撸” “怎么了？”我有些...
    開封第一講書人閱讀 156,872評論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵受扳，是天一觀的道長携龟。 經(jīng)常有香客問我，道長勘高，這世上最難降的妖魔是什么峡蟋？ 我笑而不...
    開封第一講書人閱讀 56,415評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮华望，結(jié)果婚禮上蕊蝗，老公的妹妹穿的比我還像新娘。我一直安慰自己赖舟，他們只是感情好蓬戚，可當(dāng)我...
    茶點故事閱讀 65,453評論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著宾抓，像睡著了一般子漩。 火紅的嫁衣襯著肌膚如雪豫喧。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,784評論 1贊 290
  • 城市分裂傳說
    那天幢泼，我揣著相機(jī)與錄音紧显，去河邊找鬼。 笑死旭绒，一個胖子當(dāng)著我的面吹牛鸟妙，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播挥吵，決...
    沈念sama閱讀 38,927評論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼重父，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了忽匈？” 一聲冷哼從身側(cè)響起房午，我...
    開封第一講書人閱讀 37,691評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎丹允，沒想到半個月后郭厌，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,137評論 1贊 303
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡雕蔽，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2贊 326
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年折柠，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片批狐。...
    茶點故事閱讀 38,622評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡扇售，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出嚣艇，到底是詐尸還是另有隱情承冰，我是刑警寧澤，帶...
    沈念sama閱讀 34,289評論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布食零，位于F島的核電站困乒，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏贰谣。R本人自食惡果不足惜娜搂，卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吱抚。 院中可真熱鬧涌攻，春花似錦、人聲如沸频伤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至因痛，卻和暖如春婚苹，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背鸵膏。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來泰國打工膊升， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人谭企。 一個月前我還...
    沈念sama閱讀 46,316評論 2贊 360
  • 代替公主和親
    正文 我出身青樓廓译，卻偏偏與公主長得像，于是被迫代替她去往敵國和親债查。 傳聞我的和親對象是個殘疾皇子非区，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2贊 348

推薦閱讀更多精彩內(nèi)容