路由、路由的嵌套、路由傳參、axios

一、 路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
通過 Vue.js 可以實現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）。
Vue.js 路由需要載入 vue-router 庫

下載：
用git 直接下載

    npm install vue
   npm install vue-router

簡單例子：
HTML：

        <div id="app">
<!--   1. -->
          <router-link to='/index'>首頁</router-link>
          <router-link to='/detail'>詳情頁</router-link>
<!--     盛放導(dǎo)航對應(yīng)內(nèi)容-->
          <router-view></router-view>
     </div>

js 部分：

      <script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    // 2.創(chuàng)建組件
    var Index={
        template:`
        <h1>這是首頁</h1>
        `
    }
    var Detail={
        template:`
        <h1>這是詳情頁</h1>
        `
    }
    
    //  3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    
    // 4. 創(chuàng)建一個路由實例
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:"active"
    })
    
    //  5.把路由實例掛在到vue實例上
    new Vue({
        el:"#app",
        router:router
    })
</script>

效果圖：

f8c28415-7b67-411d-95f9-9469ab0a19a4.png

二、 路由的嵌套

  HTML：

  <div id='app'>
       <router-link to='/home'>首頁</router-link>
       <router-link to='/user'>用戶頁</router-link>
        <!--     盛放導(dǎo)航對應(yīng)內(nèi)容-->
     <router-view></router-view>
 </div>

js 部分：

         <script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
    //2.創(chuàng)建組件
    var Home={
        template:`
          <h1>這是首頁</h1>
        `
    }
    
    var User={
        template:`
         <div>
            <h1>這是用戶頁</h1>
            <ul>
               <li>
                  <router-link to='/user/regist'>注冊</router-link>
               </li>
                <li>
                  <router-link to='/user/login'>登錄</router-link>
               </li>
            </ul>
            <router-view></router-view>
        </div>
       `
    }
    
    var Regist={
        template:`
          <h3>這是注冊頁</h3>
        `
    }
     var Login={
        template:`
          <h3>這是登錄頁</h3>
        `
    }
    
    //3.配置路由
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login',component:Login}
            ]
        }
    ]
    
    //4.創(chuàng)建路由實例
    const router=new VueRouter({
        routes:routes
    })
    //5.
   new Vue({
       el:'#app',
       router:router//注冊路由
   })

效果圖：

4057.png

三、路由的傳參

    html：
    
           <div id='app'>
               <router-link to='/home'>首頁</router-link>
               <router-link to='/user'>用戶頁</router-link>
   
               <router-view></router-view>
          </div>

  js部分：

          <script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
    //2.創(chuàng)建組件
    var Home={
        template:`
          <h1>這是首頁</h1>
        `
    }
    
    var User={
        template:`
         <div>
            <h1>這是用戶頁</h1>
            <ul>
               <li>
                  <router-link to='/user/regist?uname=jack&&upwd=123'>注冊</router-link>
               </li>
                <li>
                  <router-link to='/user/login/rose/456'>登錄</router-link>
               </li>
            </ul>
            <router-view></router-view>
        </div>
       `
    }
    
    var Regist={
        template:`
         <div>
          <h3>這是注冊頁</h3>
          <a href='#'>{{$route.query}}</a>
          <ul>
              <li>{{$route.query.uname}}</li>
              <li>{{$route.query.upwd}}</li>
          </ul>
         </div>
        `
    }
     var Login={
        template:`
        <div>
          <h3>這是登錄頁</h3>
          <a href="">{{$route.params}}</a>
          <ul>
              <li>{{$route.params.userName}}</li>
              <li>{{$route.params.password}}</li>
          </ul>
        </div>
        `
    }
    
    //3.配置路由
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login/:userName/:password',component:Login}
            ]
        }
    ]
    
    //4.創(chuàng)建路由實例
    const router=new VueRouter({
        routes:routes
    })
    //5.
   new Vue({
       el:'#app',
       router:router//注冊路由
   })
</script>

效果圖：
07de6c42-7609-498c-9c3e-1fd909612010.png

四、vue中的axios

vue中的ajax 插件
下載axios:
npm install axios

  安裝http-server
 npm install http-server -g

使用http-server 開啟一個服務(wù)器

例子：
html：

      <a href=""></a>
   <div class="app">
         <router-link to="/index">首頁</router-link>
        <router-link to="/detail">詳情頁</router-link>
        <!--       盛放導(dǎo)航對應(yīng)的內(nèi)容-->
       <router-view></router-view>
   </div>
      
js部分：

       <script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
<script>
    // 2. 創(chuàng)建組件
    var Index={
        template:`
        <h1>這是首頁</h1>
        `
    }
    
    var Detail={
        template:`
            <div>
                <h1>我是詳情頁</h1>
                <table border=1 cellspacing=0>
                    <thead>
                        <tr>
                            <td>編號</td>
                            <td>品名</td>
                            <td>單價</td>
                            <td>數(shù)量</td>
                            <td>小計</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="value in fruList">
                            <td>{{value.num}}</td>
                            <td>{{value.pname}}</td>
                            <td>{{value.price}}</td>
                            <td>{{value.count}}</td>
                            <td>{{value.sub}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        `,
        data:function(){
            return{
                fruList:null
            }
        },
        mounted:function(){
            var self=this;
            axios({
                method:'get',
                url:'fruit.json'
            }).then(function(resp){
                console.log(resp.data)
                self.fruList=resp.data
            }).catch(function(err){
                console.log(err)
            })
        }
    }
    // 3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    // 4.創(chuàng)建一個路由實例
    
        const router=new VueRouter({
            routes:routes,
            linkActiveClass:"active"
        })
    // 5. 把路由實例掛在到vue實例上
    new Vue({
        el:'.app',
        router:router
    })
</script>

json部分：

  [

{
    "num":1,
    "pname":"apple",
    "price":3,
    "count":4,
    "sub":12
},
 {
    "num":2,
    "pname":"pear",
    "price":4,
    "count":5,
    "sub":20
},
 {
    "num":3,
    "pname":"orange",
    "price":5,
    "count":6,
    "sub":30
}
]

鏈接網(wǎng)址：
http://192.168.1.108:8080
http://127.0.0.1:8080

效果圖：


5160436.png
最后編輯于 ：
?著作權(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)容

  • 考試結(jié)束后，孩子的暑期生活依然忙碌，每隔一天要到學(xué)校參加鼓號隊排練，她們將代表區(qū)上參加下月初全市小學(xué)生運動會的開幕...
    素言錦心閱讀 937評論 8贊 11
  • 浣溪沙? 菊頌 菊展秋嫣花香濃，縐菊潔身緣秋風(fēng)，清心自傲百樣紅。 圣潔賢心韻澤悟，獨具丹情蔑江湖。湛然堅貞生傲骨。
    純水陸零閱讀 570評論 0贊 9
  • 我是表格中68號會員楊進喜，有10年的塑膠地板從業(yè)經(jīng)驗，客戶有藍天教育集團，波利亞教育集團，我需要的合作伙伴是人造...
    楊進喜閱讀 283評論 0贊 0
  • 今天我和楊欣宇來到了景明山泉的基地，首先映入眼前的是一副美若天仙的美景。 剛下車，我和楊欣雨就走進了屬于我們...
    東京食尸鬼_7843閱讀 447評論 0贊 3
  • 在《學(xué)習(xí)的邏輯3》 里面，我們介紹了兩種常見的學(xué)習(xí)障礙，今天介紹另外兩種。 障礙三：對反饋的心理抵觸 首先是對反饋...
    三四行閱讀 803評論 0贊 6

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