美文网首页
路由传参

路由传参

作者: 长安有故里_5e53 | 来源:发表于2018-09-26 19:07 被阅读0次

    1.路由的传参:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       <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>
           //2
            var Home={
                template:`
                 <div>我是首页</div>
                `
            }
             var User={
                template:`
                 <div>
    
                      我是用户页
                     <p>
                        <router-link to='/user/regist?uname=jack&upwd=123'>注册</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="">uname:{{$route.query.uname}}</a>
                   <a href="">upwd:{{$route.query.upwd}}</a>
                  </div>
                 `
            } 
             var Login={
                template:`
                     <div>
                       <h1>这是登录页面</h1>
                       <a>{{$route.params}}</a>
                       <a>{{$route.params.uname}}</a>
                       <a>{{$route.params.upwd}}</a>
                     </div>
                    `
            }  
          //3.
             const routes=[
                 {path:'/',component:Home},
                 {path:'/home',component:Home},
                 {
                     path:'/user',
                     component:User,
                     children:[
                         {path:'regist',component:Regist},
                         {path:'login/:uname/:upwd',component:Login}
                     ]
                 }
             ]
           //4.创建实例
             const router=new VueRouter({
                 routes:routes
             })
             
             
          new Vue({
              el:"#app",
              router:router
          })
        </script>
    </body>
    </html>
    

    2.axios:
    html部分:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    /*
            .router-link-active{
                color:red;
            } 
    */
            .active{
                color:red;
            }
        </style>
    </head>
    <body>
     <a></a>
      <div id='app'>
         <!--1.-->
         <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>
           //2.创建组件
           var Home={
               template:`
                 <h1>这是首页</h1>
               `
           }
           
           var User={
               template:`
                 <div>
                    <h1>这是用户页</h1>
                     <table border=1 cellspacing=0>
                       <thead>
                           <tr>
                             <th>编号</th>
                             <th>品名</th>
                             <th>单价</th>
                             <th>数量</th>
                             <th>小计</th>
                           </tr>
                       </thead>
                       <tbody>
                          <tr v-for="value in list">
                             <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{
                      list:null
                   }
               },
               mounted:function(){
                   var self=this;
                   axios({
                       method:"get",//get post
                       url:'fruit.json'
                   }).then(function(resp){//请求成功
                       console.log(resp.data)
                       self.list=resp.data;
                   }).catch(function(err){//请求失败
                       console.log(err)
                   })
               }
               
           }
           
           //3.配置路由
           const  routes=[
               {path:'/',component:Home},
               {path:'/home',component:Home},
               {path:'/user',component:User}
           ]
           
           //4.创建路由实例
           const router=new VueRouter({
               routes:routes,
               linkActiveClass:'active'
           })
           
           //5.路由实例挂载到vue实例上
           new Vue({
               el:'#app',
               router:router
           })   
           
        </script>
    </body>
    </html>
    

    json部分:
    [
    {
    "num":1,
    "pname":"apple",
    "price":3,
    "count":2,
    "sub":6
    },
    {
    "num":2,
    "pname":"pear",
    "price":4,
    "count":3,
    "sub":12
    },
    {
    "num":3,
    "pname":"banana",
    "price":5,
    "count":4,
    "sub":20
    }
    ]

    相关文章

      网友评论

          本文标题:路由传参

          本文链接:https://www.haomeiwen.com/subject/osujoftx.html