路由、路由的嵌套、路由传参、axios

一、 路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（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>
<!--     盛放导航对应内容-->
          <router-view></router-view>
     </div>

js 部分：

      <script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    // 2.创建组件
    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. 创建一个路由实例
    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>
        <!--     盛放导航对应内容-->
     <router-view></router-view>
 </div>

js 部分：

         <script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
    //2.创建组件
    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.创建路由实例
    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.创建组件
    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.创建路由实例
    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 开启一个服务器

例子：
html：

      <a href=""></a>
   <div class="app">
         <router-link to="/index">首页</router-link>
        <router-link to="/detail">详情页</router-link>
        <!--       盛放导航对应的内容-->
       <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. 创建组件
    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>数量</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.创建一个路由实例
    
        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
}
]

链接网址：
http://192.168.1.108:8080
http://127.0.0.1:8080

效果图：

5160436.png