vue 路由

最新推荐文章于 2024-09-11 17:04:07 发布

原创最新推荐文章于 2024-09-11 17:04:07 发布 · 604 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文通过实例展示了Vue.js中路由的基本配置及使用方法，包括单页面应用的基础路由设置、多级路由的配置过程，以及如何实现参数传递等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由基础

<!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>