vue中使用路由嵌套

最新推荐文章于 2024-04-29 23:47:56 发布

逆魂夜

最新推荐文章于 2024-04-29 23:47:56 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/qq_44388393/article/details/89218086

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//创建app
<div id="app">
	 //登录和注册按钮
    <router-link tag="button" to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    //占位
    <router-view></router-view>
</div>
<template id="login">
    <div>
        <h1>登录组件</h1>
        <router-link to="/login/vip">vip</router-link>
        <router-link to="/login/supervip">超级vip</router-link>
        <router-view></router-view>
    </div>
</template>
//引入vue和vue-router
<script src="js/vue-2.4.0.js"></script>
<script src="js/vue-router-3.0.1.js"></script>
<script>
//创建组件
    let login = {
        template:'#login'
    }
    let register = {
        template:'<h1>注册组件</h1>'
    }
    let vip = {
        template:'<h1>vip</h1>'
    }
    let supervip = {
        template:'<h1>超级vip</h1>'
    }
	//创建路由实例
    let router=new VueRouter({
    //用routes属性
        routes:[
        //path 表示你要监听的路由地址
        //component表示展示component对应的组件-->写的是组件模板对象的名称,不是组件名
            {path:'/',redirect:'/login'},//根路径下,又重定义到/login路径所对应的页面
            {path:'/login',component:login,children:[// 通过 children 数组属性，来实现路由的嵌套
       
                    {path:'/',redirect:'vip'},
                     // 注意，子路由的开头位置，不要加 / 路径符
                    {path:'vip',component:vip},
                    {path:'supervip',component:supervip},
                ]},
            {path:'/register',component:register}
        ]
    })


    let vm = new Vue({
        el:'#app',
        data:{

        },
        //调用
        router,
    })
</script>
</body>
</html>

逆魂夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中使用路由嵌套

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>//创建app<div id="app"> //登录和注册按钮 ...
复制链接

扫一扫