vue学习005

最新推荐文章于 2023-09-21 20:18:52 发布

101之歌

最新推荐文章于 2023-09-21 20:18:52 发布

阅读量109

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qxf1374268/article/details/90045780

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

路由的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套</title>
    <script src="vue.js"></script>
    <script src="vue-route.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/account">Account</router-link>

    <router-view></router-view>

</div>

<template id="tmp1">
    <div>
        <h1>这是Account组件</h1>
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</template>

</body>
<script>
    var account = {
        template: '#tmp1'
    };

    var login = {
        template: '<h3>登陆</h3>'
    };

    var register = {
        template: '<h3>注册</h3>'
    };

    var router = new VueRouter({
        routes:[
            {
                path:'/account',
                component:account,
                children:[
                    {path:'login',component:login},
                    {path:'register',component:register}
                ]
            },
        ]
    });

    var app = new Vue({
        el:'#app',
        router
    })

</script>
</html>

101之歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习005

路由的嵌套<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由嵌套</title> <script src="vue.js"></script> <script src="...
复制链接

扫一扫

专栏目录