vue 路由

来源：互联网发布：淘宝的等级怎么提升编辑：程序博客网时间：2024/05/17 03:38

路由基础

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/bower_components/vue/dist/vue.js"></script>    <script src="../js/bower_components/vue-router/dist/vue-router.js"></script>    <style>    </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><script>    //1. 准备一个根组件    var App=Vue.extend();    //2. Home News组件都准备    var Home=Vue.extend({        template:'<h3>我是主页</h3>'    });    var News=Vue.extend({        template:'<h3>我是新闻</h3>'    });    //3. 准备路由    var router=new VueRouter();    //4. 关联    router.map({        'home':{            component:Home        },        'news':{            component:News        }    });    //5. 启动路由    router.start(App,'#box');    //6. 跳转    router.redirect({        '/':'home'    });</script></body></html>

多层路由

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/bower_components/vue/dist/vue.js"></script>    <script src="../js/bower_components/vue-router/dist/vue-router.js"></script>    <style>    </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">    <h1>这是主页</h1>    <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">    <h1>这是新闻页</h1></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>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/bower_components/vue/dist/vue.js"></script>    <script src="../js/bower_components/vue-router/dist/vue-router.js"></script>    <style>        .v-link-active{            color: aqua;        }    </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">    <h1>这是主页</h1>    <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">    <h1>这是新闻页</h1>    <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>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/bower_components/vue/dist/vue.js"></script>    <script src="../js/bower_components/vue-router/dist/vue-router.js"></script>    <style>        .v-link-active{            color: aqua;        }    </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">    <h1>这是主页</h1>    <div>        <a v-link="{path:'/home/login/jack'}">登录</a>        <a v-link="{path:'/home/reg/jony'}">注册</a>    </div>    <div>        <router-view></router-view>    </div></template><template id="News">    <h1>这是新闻页</h1>    <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>

0 0