Vue-Router在 vue1.0中的使用

最新推荐文章于 2022-01-13 11:44:57 发布

原创最新推荐文章于 2022-01-13 11:44:57 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

我是我家小女孩@khuntoria

本文通过一个简单的登录注册页面示例介绍了如何使用Vue.js结合Vue Router实现前端路由管理。具体包括了Vue组件定义、路由配置及页面间的跳转等功能。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue1026.js"></script>
    <script src="vue-router1.0.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- {path} 是跳转路径 -->
        <a v-link='{path:"/login"}'>登录</a>
        <a v-link='{path:"/register"}'>注册</a>
        <!-- 组件显示的位置 -->
        <router-view></router-view>
    </div>
    <script>
        //定义根组件
        var app = Vue.extend({});
        //定义组件
        var register = Vue.extend({
            template:'<h2>注册</h2>'
        })
        var login = Vue.extend({
            template:'<h2>登录</h2>'
        })
        //实例化vuerouter对象
        var vuerouter =new VueRouter();
        
        //map是一个对象  路由规则
        vuerouter.map({
            'login':{
                component:login
            },
            'register':{
                component:register
            }
        });
        //生效vuerouter
        vuerouter.start(app,'#app');
        //默认跳转到登录组件显示
        vuerouter.redirect({'/':'/login'});

    var vm =new Vue({
        el:'#app',
    })
    </script>
</body>
</html>