vue/cli的学习10 二级路由的使用

最新推荐文章于 2022-06-06 14:15:48 发布

大雷神

最新推荐文章于 2022-06-06 14:15:48 发布

阅读量863

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/ldc121xy716/article/details/110490375

版权

vue 专栏收录该内容

28 篇文章 41 订阅

订阅专栏

1:需要在哪个页面有子页面显示就是在哪个页面放router-view标签(本质就是一个动态组件)

2:在components中新建一个mine文件夹文件夹中新建Login.vue 和Register.vue

<template>
    <div>
        登录
    </div>
</template>

<template>
    <div>
        注册
    </div>
</template>

3:在Mine.vue中设置如下代码 router-link就是a标签 router-view就是路由切换

<template>
    <div class="mine">
        <div class="content">
            <div class="content-item">
                <router-link to="/mine/login">登录</router-link>
                <router-link to="/mine/register">注册</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

4:修改Mine页面的路由配置

{
    path: '/mine',
    name: 'mine',
    component:Mine,
    children:[
        {
          path:"",
          name:"login",
          component:()=>import ("../components/mine/Login.vue")
        },
        {
          path:"login",
          name:"login",
          component:()=>import ("../components/mine/Login.vue")
        },
        {
          path:"register",
          name:"register",
          component:()=>import ("../components/mine/Register.vue")
        },
    ]
  },

5:通过地址栏或者a标签就可以切换子路由了