vue1.0简单的使用路由并传参数

Vue路由实践

最新推荐文章于 2021-01-30 13:53:18 发布

后端切图仔

最新推荐文章于 2021-01-30 13:53:18 发布

阅读量657

点赞数 1

分类专栏：第一次

第一次专栏收录该内容

116 篇文章

订阅专栏

本文通过一个示例展示了如何使用Vue.js和Vue Router实现前端路由功能，包括定义组件、设置路由规则及参数传递等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<script src="vue1.0.11.js"></script>
<script src="vue-router1.0.js"></script>
<body>
<div id="app">
<a href="#" v-link="{path:'/login'}">登录</a>
    <a href="#" v-link="{path:'/register/200'}">注册</a>
    <!--//还要有一个路由占位-->
    <router-view></router-view>
</div>
</body>
<script>
    //开始路由代码的编写
    //定义三个组件
    var App=Vue.extend({});
    var login=Vue.extend({
        template:'<h1>登录页面</h1>'
    });
    var register=Vue.extend({
        template:'<h1>注册页面{{id}}</h1>',
        data:function () {
            return {
                id:0
            }
        },
        //用生命周期来调用它，这里id1这个值是根据下面设定路由规则的设定来写的，如果下来是id2,那么这里也要跟着它一样
        created:function () {
            this.id=this.$route.params.id1;

        }
        
    });
//    设定路由规则
    var router=new VueRouter();
    router.map({
       'login':{component:login},
        'register/:id1':{component:register}
    });
    //开启路由
    router.start(App,'#app');
    //默认跳转到/login
    router.redirect({'/':'/login'});//表示如果是在/下面，那么就跳转登录页面

</script>
</html>