路由

作者: 王wl | 来源:发表于2018-09-28 11:04 被阅读0次

thinkphp5学习笔记(三)路由配置
larevel 路由索引
laravel路由
Vue3: 前端路由的概念和原理
组件化2.路由框架的设计
vue中的路由
React-Router知识点
路由策略
Laravel 学习笔记
React路由

案例1：

QQ图片20180928105453.png

代码如下：

  <body>
<a href=""></a>
<div id='app'>
    <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>
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var Detail={
        template:`
            <h1>这是详情页</h1>
        `
    }
    const routes=[
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    const router=new VueRouter({
        routes:routes
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>

案例2：

13.png

代码如下：

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .active{
        color:pink;
    }
</style>
</head>

<body>
<a href=""></a>
<div id='app'>
    <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>
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var Detail={
        template:`
            <h1>我是详情页</h1>
        `
    }
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>
</body>

案例3：路由的传参

QQ图片20180928105937.png

代码如下：

<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>
    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>
        `
    }
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist}, {path:'login/:userName/:password',component:Login}
            ]
        }
    ]
    const router=new VueRouter({
        routes:routes
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>
</body>

案例4：路由的嵌套

QQ截图20180928110145.png

代码如下：

<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>
    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>
        `
    }
     const routes=[
         {path:'/',component:Home},
         {path:'/home',component:Home},
         {
             path:'/user',
             component:User,
             children:[
                 {path:'regist',component:Regist},
                 {path:'login',component:Login}
             ]
         }
     ]
     const router=new VueRouter({
         routes:routes
     })
     new Vue({
         el:'#app',
         router:router
     })
</script>
</body>

案例5：

QQ截图20180928110842.png

代码如下：

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .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>
     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)
            })
        }
    }
    
     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>

fruit.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
    }
]