vue1.0 路由规则和传参

最新推荐文章于 2022-08-28 15:27:58 发布

shmaymay

最新推荐文章于 2022-08-28 15:27:58 发布

阅读量282

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42124866/article/details/81121542

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue1.js"></script>
    <script src="vue-router.js"></script>
</head>
<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
                }
            },
            created:function(){
                this.id = this.$route.params.id1;
            }
        });
        //设定路由规则
        var router =  new VueRouter();
        router.map({
           'login':{component:login},
           'register/:id':{component:register}
        });
        //开启路由
        router.start(App,'#app');
        //默认跳转到 /login
        router.redirect({'/':'/login'});
    </script>
</html>

shmaymay

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue1.0 路由规则和传参

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="vue1.js"&gt;&lt;/
复制链接

扫一扫