vue1.0嵌套路由这样写哪里错了，为什么没有显示出来

最新推荐文章于 2024-05-26 12:44:14 发布

后端切图仔

最新推荐文章于 2024-05-26 12:44:14 发布

阅读量335

点赞数

分类专栏：第一次

第一次专栏收录该内容

116 篇文章 1 订阅

订阅专栏

<!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:'/account/login'}">登录</a>
    <a href="#" v-link="{path:'/account/register'}">注册</a>
    <!--占位符，用来显示-->
    <router-view></router-view>
</div>
</body>
<script>
//1.0实例化Router对象,也就是设定路由规则
    var Router=VueRouter();
 //2.0定义相关组件
var App=Vue.extend({});
var account=Vue.extend({
    template:'<router-view></router-view>'
});
var login=Vue.extend({
    template:'<h1>登录页面</h1>'
});
var register=Vue.extend({
    template:'<h1>注册页面</h1>'
});
//3.0完成嵌套路由的写法
    router.map({
        'account':{
         component:account,
            subRoutes:{
             'login':{
                 component:login
             },
             'register':{
                 component:register
             }
            }
        }
    });
    //4.0启动路由
    router.start(App,'#app');
    //启动默认显示
    router.redirect({'/':'/account/login'});
</script>
</html>

后端切图仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue1.0嵌套路由这样写哪里错了，为什么没有显示出来

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;嵌套路由的写法&lt;/title&gt;&lt;/head&gt;&lt;script src="vue1.0.11.j
复制链接

扫一扫

专栏目录