2018-09-25路由的例子

作者: 萧声断未央 | 来源:发表于2018-09-27 10:36 被阅读0次

2018-09-25路由的例子
路由
gin的路由例子2
gin的路由例子3
vue 简单路由例子
gin路由例子1
路由事件
2018-09-25 路由
router(vueRouter使用redirect,alias
Flask之路由管理

1

<!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 href=""></a>
   <div id='app'>
    <!--1.-->
       <router-link to='/index'>首页</router-link>
       <router-link to='/detail'>详情页</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 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)
                    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>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--  
路由的传参：
   查询字符串：
      /user/regist?uname=jack&&upwd=123
     接收：{{$route.query}}
   rest风格传参 
      /user/login/rose/456
       接收： {{$route.params}}
        -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <a href=""></a>
   <div id='app'>
    <!--1.-->
       <router-link to='/index'>首页</router-link>
       <router-link to='/detail'>详情页</router-link>
        <!--盛放导航对应的内容-->
      <router-view></router-view>
   </div>
    <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:'/index',component:Index},
            {path:'/detail',component:Detail}
        ]
    
        //4.创建一个路由实例
        const router=new VueRouter({
            routes:routes
        })
        //5.把路由实例挂在到vue实例上 
       new Vue({
           el:'#app',
           router:router
       })

    </script>
</body>
</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 href=""></a>
    <div id='app'>
     <!--1.-->
        <router-link to='/index'>首页</router-link>
        <router-link to='/detail'>详情页</router-link>
         <!--盛放导航对应的内容-->
        <router-view></router-view>
    </div>
     <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>
 </body>
 </html>

<!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:`
              <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>
</body>
</html>

<!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:`
              <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//注册路由
       })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--    
  路由：vue-router  带三方工具库
        创建单页面应用  spa (single page application) 
        通过不同的URL访问不同的页面
        下载：
           npm install vue
       
           npm install vue-router
       
       
   axios:
      vue中的ajax    插件
      下载axios:
         npm install axios
      1.0   vue-resource  
      2.0   axios  
  
     安装http-server
        npm install http-server -g   
         
     使用http-server 开启一个服务器              
                  
-->
</body>
</html>