欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

路由嵌套

程序员文章站 2022-06-02 20:15:19
...

路由嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.js"></script>
    <style>
    </style>
</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">登录</router-link>
        <router-link to="/account/register">注册</router-link>
    </div>
</template>
<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:[//使用children属性，实现子路由的同时，子路由的path前面不要带‘/’，
                    // 否则永远以根路径开始请求，这样不方便用户去理解url地址
                {path:'login',component:login},
                {path:'register',component:register}
                ]},
            // {path:'/account/login',component:login},
            // {path:'/account/register',component:register}
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:router
    })
</script>
</body>
</html>

</body>
</html>

上一篇： [MySQL] like “%XX“ 和 like “XX%“ 的索引情况

下一篇： vscode中eslint插件的配置（prettier配置无效）

推荐阅读