一摔癣、查找字符串

（傳）在路徑后跟？（接）{{$route.query}}

二服猪、rest風(fēng)格傳參

（傳）在路徑后/ /

<div class="box">
            <router-link to="/home">首頁(yè)</router-link>
            <router-link to="/bag">用戶頁(yè)</router-link>
            <router-view></router-view>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var home={
                template:`
                    <h1>歡迎來到我的網(wǎng)站</h1>
                `
            }
            var bag={
                template:`
                   <div>
                        <h1>歡迎來到我的用戶頁(yè)</h1>
                        <ul>
                            <li>
                                <router-link to="/bag/zhu?uname=jack&upwd=123">注冊(cè)</router-link>
                            </li>
                            <li>
                                <router-link to="/bag/deng/jack/899">登錄</router-link>
                            </li>
                        </ul>
                        <router-view></router-view>
                    </div> 
                `
            }
            var zhu={
                template:`
                    <div>
                      <h1>歡迎來到我的注冊(cè)</h1>
                      <p>{{$route.query}}</p>
                      <p>{{$route.query.uname}}</p>
                      <p>{{$route.query.upwd}}</p>
                    </div>
                `
            }
            var deng={
                template:`
                  <div>
                    <h1>歡迎來到我的登錄</h1>
                    <p>{{$route.params}}</p>
                    <p>{{$route.params.uname}}</p>
                    <p>{{$route.params.upwd}}</p>
                </div>
                `
            }
            const routes=[
                {path:'/',component:home},
                {path:"/home",component:home},
                {
                    path:"/bag",
                    component:bag,
                    children:[
                        {path:"zhu",component:zhu},
                        {path:"deng/:uname/:upwd",component:deng}
                    ]
                }
            ]
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:".box",
                router:router
            })
        </script>

axios

axios是vue中的ajax 是vue的一個(gè)庫(kù)

下載axios：npm install axios

開啟服務(wù)器 $http-server
安裝htttp-server：npm install http-server -g

``html
<div class="box">
            <router-link to="/home">首頁(yè)</router-link>
            <router-link to="/bag">用戶頁(yè)</router-link>
            <router-view></router-view>
            
        </div>
``js
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script src="js/axios.js"></script>
        <script>
            var home={
                template:`
                    <h1>歡迎來到我的網(wǎng)站</h1>
                `
            }
            var bag={
                template:`
                   <div>
                        <h1>歡迎來到我的用戶頁(yè)</h1>
                            <table>
                                <thead>
                                    <tr>
                                        <th>編號(hào)</th>
                                        <th>商品名稱</th>
                                        <th>單價(jià)</th>
                                        <th>數(shù)量</th>
                                        <th>小計(jì)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="value in arr">
                                        <td>{{value.num}}</td>
                                        <td>{{value.name}}</td>
                                        <td>{{value.price}}</td>
                                        <td>{{value.shu}}</td>
                                        <td>{{value.sub}}</td>
                                    </tr>
                                </tbody>
                            </table>
                    </div> 
                `,
                data:function(){
                    return{
                        arr:null
                    }
                },
                mounted:function(){
                    var self=this;
                    axios({
                         method:"get",       //get  或    post
                         url:'axios.json' 
                    }).then(function(resp){   //請(qǐng)求成功
                        self.arr=resp.data;
                    }).catch(function(err){  //請(qǐng)求失敗
                        console.log(err)
                    })
                }
            }
            const routes=[
                {path:'/',component:home},
                {path:"/home",component:home},
                {path:"/bag",component:bag}
            ]
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:".box",
                router:router
            })
        </script>

``json
[
  {
    "num":1,
    "name":"apple",
    "price":3,
    "shu":2,
    "sub":6
  },
  {
    "num":1,
    "name":"pear",
    "price":3,
    "shu":8,
    "sub":24
  },
 {
    "num":3,
    "name":"orange",
    "price":4,
    "shu":2,
    "sub":8
 }
]