vue路由和axios

路由的传参：1.查询字符串：/user/regist?uname=jack&upwd=123
接收： {{$route.query}}
2.风格传参： /user/login/rose/456

<div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/user'>用户页</router-link>
            
            <router-view></router-view>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script>
            var Home={
                template:`
                  <div>这是首页</div>
                `
            }
            var User={
                template:`
                  <div>
                     我是用户页
                  <p>
                    <router-link  to='/user/regist?name=tom&parswed=1998'>注册</router-link>
                  </p>
                  <p>
                     <router-link  to='/user/login/rose/456'>登录</router-link>
                  </p>
                     <router-view></router-view>
                  </div>
                `
            }
            var Regist={
                template:`
                  <div>
                    <h1>这是注册页</h1>
                    <a href=''>{{$route.query}}</a>
                    <a href=''>name:{{$route.query.name}}</a>
                    <a href=''>parswed:{{$route.query.parswed}}</a>
                  </div>
                `
            }
            var Login={
                template:`
                   <div>
                     <h1>这是登录页面</h1>
                     <a>{{$route.params}}</a>
                     <a>{{$route.params.name}}</a>
                     <a>{{$route.params.parswed}}</a>
                   </div>
                `
            }
            const routes=[
              {path:'/',component:Home},
              {path:'/home',component:Home},
              {
                path:'/user',
                component:User,
                children:[
                    {path:'regist',component:Regist},
                　　　{path:'login/:name/:parswed',component:Login}
                ]
              }
            ]
            const router=new VueRouter({
                routes:routes
            })
            
            new Vue({
                el:"#app",
                router:router
            })
        </script>

axios:vue中的ajax，
作用：前台页面与后台数据的交互作用
用GIT获取假服务器和端口号，实现交互。

例：

<div id="app">
            <router-link to="/home">首页</router-link>
            <router-link to='/user'>用户页</router-link>
            
            <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>
            var Home={
                template:`
                   <h1>这是首页</h1>
                `
            }
            var User={
                  template:`
                  <div>
                    <h1>这是登录页面</h1>
                    <table>
                       <thead>
                          <tr>
                             <th>编号</th>
                             <th>品名</th>
                             <th>数量</th>
                             <th>单价</th>
                             <th>小计</th>
                          </tr>
                       </thead>
                       <tbody>
                          <tr v-for="value  in  flist">
                             <td>{{value.num}}</td>
                             <td>{{value.name}}</td>
                             <td>{{value.price}}</td>
                             <td>{{value.count}}</td>
                             <td>{{value.sub}}</td>
                          </tr>
                       </tbody>
                    </table>
                </div>
                `,
                data:function(){
                    return{
                        flist:null
                    }
                },
                mounted:function(){
                    var sew= this;
                    axios({
                        method:"get",
                        url:'list.json'
                    }).then(function(wyx){
                        console.log(wyx.data)
                        sew.flist=wyx.data;
                    }).catch(function(jlt){
                        console.log(jlt)
                    })
                }
            }
            const routes=[
                {path:'/',component:Home},
                {path:'/home',component:Home},
                {path:'/user',component:User}
            ]
            
            const router =new VueRouter({
                routes:routes,
                linkActiveClass:'active'
            })
            
            
            
            new Vue({
                el:'#app',
                router:router
            })
        </script>