vue之路由嵌套,子路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div >
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>
</div>
<template >
    <div>
        <h1>用户信息</h1>
        <ul>
            <li><router-link to="/user/regist">用户注册</router-link></li>
            <li><router-link to="/user/login">用户登录</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
</template>
</body>
<script>
    var home={
        template:'<h1>home</h1>'
    };
    var user={
        template:'#user'
    };
    let login={
        template:'<h1>登录中....</h1>'
    };
    let regist={
        template:"<h1>注册</h1>"
    }
    const routes1=[
        {path:'/home',component:home},
        {path:'/user',component:user,
        children:[
            {
            path: 'login',
            component: login,
            },
            {
             path:'regist',
             component:regist
            }
        ]},
        // {path:'*',redirect:'/home'}
    ];
    const router = new VueRouter({
        routes:routes1,
    });
    new Vue({
        el:'#app',
        router
    })
</script>
</html>

以上是 vue之路由嵌套,子路由 的全部内容， 来源链接： utcz.com/z/376018.html

回到顶部