2018-09-25路由

作者: 好多好多鱼z | 来源:发表于2018-09-25 09:09 被阅读0次

2018-09-25 路由
Java 基本数据类型
情绪的进化成因
2018-09-25路由
2018-09-25路由
Web阶段——TCP/UDP区别
【身体，比我们认为的厉害的多!】
HTTP/HTTPS区别
2018-09-25路由的嵌套
2018-09-25路由的例子

1.路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="app">
       <router-link to="/a">首页</router-link>
       <router-link to="/b">关于我们</router-link>
       <router-view></router-view>
   </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var A = {
            template:`
                <h1>你好</h1>
            `
        }
        
        var B = {
            template:`
                <h1>不好</h1>
            `
        }
        
        const routers=[
            {path:"/",component:A},           
            {path:"/a",component:A},
            {path:"/b",component:B}

        ]
        
        const router=new VueRouter({
            routes:routers
        })
        
       new Vue({
           el:"#app",
           router:router
       })
    
    </script>
</body>
</html>

QQ拼音截图未命名.png

2.路由的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .o{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/home">首页</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 Home ={
        template:`
               <div>
               <h1>这是首页</h1>
               </div>
            `
    }

    var Detail ={
        template:`
               <div>
                 <h1>这是详情页</h1>
                 <ul>
                    <li>
                       <router-link to="/detail/a">登陆</router-link>

                    </li>
                     <li>
                       <router-link to="/detail/b">注册</router-link>

                    </li>
                 </ul>
                 <router-view></router-view>
               </div>
            `
    }
    var A={
        template:`
           <h3>aaaa</h3>
        `
    }

    var B={
        template:`
           <h3>bbbb</h3>
        `
    }

    const C=[
        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/detail",component:Detail,
        children:[
            {path:"a",component:A},
            {path:"b",component:B}
        ]
        }
    ]
    const D=new VueRouter({
        routes:C,
        linkActiveClass:"o"

    })
    new Vue({
        el:"#app",
        router:D
    })
</script>
</body>
</html>

QQ拼音截图未命名.png

3.路由的传参

 路由的传参：
      1.查询字符串
         /user/regist?name=jack&age=18  
         接收：{{$route.query}}                                   
      2.rest风格
         /user/login/jack/18
         接收： {{$route.params}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .o{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/home">首页</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 Home ={
        template:`
               <div>
               <h1>这是首页</h1>
               </div>
            `
    }

    var Detail ={
        template:`
               <div>
                 <h1>这是详情页</h1>
                 <ul>
                    <li>
                       <router-link to="/detail/a?name=jack&age=18">登陆</router-link>

                    </li>
                     <li>
                       <router-link to="/detail/b/rose/jack">注册</router-link>

                    </li>
                 </ul>
                 <router-view></router-view>
               </div>
            `
    }

    var A={
        template:`
        <div>
         <h3>aaaa</h3>
         <a href="">{{$route.query}}</a>
         <ul>
         <li>{{$route.query.name}}</li>
         <li>{{$route.query.age}}</li>
         </ul>
        </div>

        `
    }

    var B={
        template:`
        <div>
         <h3>bbbb</h3>
         <p>{{$route.params}}</p>
                <ul>
                    <li>{{$route.params.name}}</li>
                    <li>{{$route.params.friend}}</li>
                 </ul>
        </div>

        `
    }

    const C=[
        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/detail",component:Detail,
            children:[
                {path:"a",component:A},
                {path:"b/:name/:friend",component:B}
            ]

        }

    ]

    const D=new VueRouter({
        routes:C,
        linkActiveClass:"o"

    })

    new Vue({
        el:"#app",
        router:D
    })



</script>
</body>
</html>

QQ拼音截图未命名.png