zoukankan      html  css  js  c++  java
  • vue-路由多层

    1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/vue-router.js"></script>
        <style>
            .v-link-active{
                font-size: 20px;
                color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>    
        </div>
    
        <template id="home">
            <h3>我是主页</h3>
            <div>
                <a v-link="{path:'/home/login'}">登录</a>
                <a v-link="{path:'/home/reg'}">注册</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新闻</h3>
        </template>
        <script>
            //1. 准备一个根组件
            var App=Vue.extend();
    
            //2. Home News组件都准备
            var Home=Vue.extend({
                template:'#home'
            });
    
            var News=Vue.extend({
                template:'#news'
            });
    
            //3. 准备路由
            var router=new VueRouter();
    
            //4. 关联
            router.map({
                'home':{
                    component:Home,
                    subRoutes:{
                        'login':{
                            component:{
                                template:'<strong>我是登录信息</strong>'
                            }
                        },
                        'reg':{
                            component:{
                                template:'<strong>我是注册信息</strong>'
                            }
                        }
                    }
                },
                'news':{
                    component:News
                }
            });
    
            //5. 启动路由
            router.start(App,'#box');
    
            //6. 跳转
            router.redirect({
                '/':'home'
            });
        </script>
    </body>
    </html>

    2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/vue-router.js"></script>
        <style>
            .v-link-active{
                font-size: 20px;
                color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>    
        </div>
    
        <template id="home">
            <h3>我是主页</h3>
            <div>
                <a v-link="{path:'/home/login'}">登录</a>
                <a v-link="{path:'/home/reg'}">注册</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            {{$route.params | json}}
        </template>
        <script>
            //1. 准备一个根组件
            var App=Vue.extend();
    
            //2. Home News组件都准备
            var Home=Vue.extend({
                template:'#home'
            });
    
            var News=Vue.extend({
                template:'#news'
            });
    
            var Detail=Vue.extend({
                template:'#detail'
            });
    
            //3. 准备路由
            var router=new VueRouter();
    
            //4. 关联
            router.map({
                'home':{
                    component:Home,
                    subRoutes:{
                        'login':{
                            component:{
                                template:'<strong>我是登录信息</strong>'
                            }
                        },
                        'reg':{
                            component:{
                                template:'<strong>我是注册信息</strong>'
                            }
                        }
                    }
                },
                'news':{
                    component:News,
                    subRoutes:{
                        '/detail/:id':{
                            component:Detail
                        }
                    }
                }
            });
    
            //5. 启动路由
            router.start(App,'#box');
    
            //6. 跳转
            router.redirect({
                '/':'home'
            });
        </script>
    </body>
    </html>

    3

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/vue-router.js"></script>
        <style>
            .v-link-active{
                font-size: 20px;
                color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>    
        </div>
    
        <template id="home">
            <h3>我是主页</h3>
            <div>
                <a v-link="{path:'/home/login'}">登录</a>
                <a v-link="{path:'/home/reg'}">注册</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            {{$route.params | json}}
            <br>
            {{$route.path}}
            <br>
            {{$route.query | json}}
        </template>
        <script>
            //1. 准备一个根组件
            var App=Vue.extend();
    
            //2. Home News组件都准备
            var Home=Vue.extend({
                template:'#home'
            });
    
            var News=Vue.extend({
                template:'#news'
            });
    
            var Detail=Vue.extend({
                template:'#detail'
            });
    
            //3. 准备路由
            var router=new VueRouter();
    
            //4. 关联
            router.map({
                'home':{
                    component:Home,
                    subRoutes:{
                        'login':{
                            component:{
                                template:'<strong>我是登录信息</strong>'
                            }
                        },
                        'reg':{
                            component:{
                                template:'<strong>我是注册信息</strong>'
                            }
                        }
                    }
                },
                'news':{
                    component:News,
                    subRoutes:{
                        '/detail/:id':{
                            component:Detail
                        }
                    }
                }
            });
    
            //5. 启动路由
            router.start(App,'#box');
    
            //6. 跳转
            router.redirect({
                '/':'home'
            });
        </script>
    </body>
    </html>

    4

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <script src="bower_components/vue-router/dist/vue-router.js"></script>
        <style>
            .v-link-active{
                font-size: 20px;
                color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">主页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view>
            </div>    
        </div>
    
        <template id="home">
            <h3>我是主页</h3>
            <div>
                <a v-link="{path:'/home/login/zns'}">登录</a>
                <a v-link="{path:'/home/reg/strive'}">注册</a>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </template>
        <template id="news">
            <h3>我是新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            {{$route.params | json}}
            <br>
            {{$route.path}}
            <br>
            {{$route.query | json}}
        </template>
        <script>
            //1. 准备一个根组件
            var App=Vue.extend();
    
            //2. Home News组件都准备
            var Home=Vue.extend({
                template:'#home'
            });
    
            var News=Vue.extend({
                template:'#news'
            });
    
            var Detail=Vue.extend({
                template:'#detail'
            });
    
            //3. 准备路由
            var router=new VueRouter();
    
            //4. 关联
            router.map({
                'home':{
                    component:Home,
                    subRoutes:{
                        'login/:name':{
                            component:{
                                template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
                            }
                        },
                        'reg':{
                            component:{
                                template:'<strong>我是注册信息</strong>'
                            }
                        }
                    }
                },
                'news':{
                    component:News,
                    subRoutes:{
                        '/detail/:id':{
                            component:Detail
                        }
                    }
                }
            });
    
            //5. 启动路由
            router.start(App,'#box');
    
            //6. 跳转
            router.redirect({
                '/':'home'
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    Convert between Unix and Windows text files
    learning Perl:91行有啥用? 88 print " ----------------------------------_matching_multiple-line_text-------------------------- "; 91 my $lines = join '', <FILE>;
    Perl:只是把“^”作为匹配的单字:只是匹配每一行的开头 $lines =~ s/^/file_4_ex_ch7.txt: /gm;
    Perl: print @globbing." "; 和 print @globbing; 不一样,一个已经转换为数组元素个数了
    为什么wget只下载某些网站的index.html? wget --random-wait -r -p -e robots=off -U mozilla http://www.example.com wget 下载整个网站,或者特定目录
    正则表达式中 /s 可以帮助“.”匹配所有的字符,包括换行,从而实现【dD】的功能
     是单词边界锚点 word-boundary anchor,一个“”匹配一个单词的一端,两个“”匹配一个单词的头尾两端
    LeetCode103 Binary Tree Zigzag Level Order Traversal
    LeetCode100 Same Tree
    LeetCode87 Scramble String
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/7420933.html
Copyright © 2011-2022 走看看