(已解决)Vue routes的 children使用(小白来看,包会!)

前言

分析链接:Vue+element ui实现好看的个人中心_vue个人信息页面代码-CSDN博客

使用了很多vue深层知识,简化并且做到自己的项目上面

对小白很有帮助,因为我就是小白,才搞明白。


最核心的就是routes的 children使用,所以先做一个例子再套用进去。

目录

前言

参考

1.项目结构

2.routes代码

3.IndextwoView代码

4.Page1View代码

5.pageSon代码

6.Page2View代码

routes解析:

1.简单常用段

2.重定向设置:

3.children的使用

3.1.导入

3.2.children的设置

页面逻辑解析

页面逻辑展示



参考

注:因为我是在自己项目做的测试,所以其他页面大家不需要也没关系,按逻辑去就行。

1.项目结构

2.routes代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import IndextwoView from "@/views/IndextwoView.vue"

const routes = [
  {
    path: '/IndextwoView',
    name: 'IndextwoView',
    component: IndextwoView,
    children: [{
      path: '/Page1View',
      name: 'Page1View',
      component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')
      },
      children: [{
        path: '/pageSon',
        name: 'pageSon',
        component: function () {
          return import( /* webpackChunkName: "about" */ '@/views/PageSon.vue')
        }
      }],
    },
    {
      path: '/Page2View',
      name: 'Page2View',
      component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page2View.vue')
      }
    }]
  },
  {
    //测试页面
    path: '/test',
    name: 'test',
    component: () => import('../views/tlias/v-forTest.vue'),
  },
  {
    //登录页面
    path: '/login',
    name: 'login',
    component: () => import('../views/tlias/LoginView.vue'),
    
  },
  {
    // 主页页面
    path: '/index',
    name: 'index',
    component: () => import('../views/tlias/IndexView.vue'),
    meta: { token: null } 
  },
  {
    // 后端页面
    path: '/stu',
    name: 'stu',
    component: () => import('../views/tlias/StuView.vue')
  },
  {
    // 后端页面
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    // 后端页面
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/login'
  }
]
const router = new VueRouter({
  routes
})

export default router

3.IndextwoView代码

<template>
  <div class="home">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title"><router-link to="/Page1View">导航一</router-link></span>
        </template>
      </el-submenu>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title"><router-link to="/Page2View">导航二</router-link></span>
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

4.Page1View代码

<template>
  <div class="pageone">page1
    <router-link to="/pageSon">显示</router-link>
    <router-view></router-view>
  </div>
</template>

5.pageSon代码

<template>
  <div class="page1-son">page1-son</div>
</template>

6.Page2View代码

<template>
  <div class="page2">page2</div>
</template>

routes解析:

1.简单常用段

下面的代码为基础路由就带有的功能带了几个页面逻辑很简单易懂,所以不解释。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  
    
  {
    //测试页面
    path: '/test',
    name: 'test',
    component: () => import('../views/tlias/v-forTest.vue'),
  },
  {
    //登录页面
    path: '/login',
    name: 'login',
    component: () => import('../views/tlias/LoginView.vue'),
    
  },
  {
    // 主页页面
    path: '/index',
    name: 'index',
    component: () => import('../views/tlias/IndexView.vue'),
    meta: { token: null } 
  },
  {
    // 后端页面
    path: '/stu',
    name: 'stu',
    component: () => import('../views/tlias/StuView.vue')
  },
  {
    // 后端页面
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    // 后端页面
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
 
]
const router = new VueRouter({
  routes
})

export default router

2.重定向设置:

由于路由中默认的为访问/路径,所以我们需要使用关键字redirect设置重定向,使他访问/路径时,访问到/login路径

{
    path: '/',
    redirect: '/login'
  }

3.children的使用

3.1.导入


在使用时需要导入主界面

import IndextwoView from "@/views/IndextwoView.vue"

3.2.children的设置

最上层的为导入的主页面的路径以及设置

后面就可以设置内部的子路由:

注:子路由中的: component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')
      },为过时写法,可以转换成 component: () => import('../views/tlias/LoginView.vue'),
也是可以使用的,没有区别

 {
    path: '/IndextwoView',
    name: 'IndextwoView',
    component: IndextwoView,
    children: [{
      path: '/Page1View',
      name: 'Page1View',
      component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page1View.vue')
      },
      children: [{
        path: '/pageSon',
        name: 'pageSon',
        component: function () {
          return import( /* webpackChunkName: "about" */ '@/views/PageSon.vue')
        }
      }],
    },
    {
      path: '/Page2View',
      name: 'Page2View',
      component: function () {
        return import( /* webpackChunkName: "about" */ '@/views/Page2View.vue')
      }
    }]
  },

页面逻辑解析

在主页面中使用

<router-link to="/Page2View">

进行路由跳转

然后使用

 <router-view></router-view>

进行页面渲染

以便于children的生效


页面逻辑展示

1.首先是我自己的页面登录(因为重定向为login)

2.进入后点击个人中心(接下来到例子内容

3.点击导航一(成功显示内容)

4.点击显示(成功显示page1-son)

5.点击导航二(成功清除原来组件,并显示page2)


套用原个人中心代码

更新中...

  • 36
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中的路由使用是通过Vue Router实现的。下面是一个简单的示例来说明如何在Vue 3中使用路由。 首先,安装Vue Router: ```bash npm install vue-router@next ``` 然后,在你的Vue 3项目的入口文件(通常是main.js)中导入Vue Router,并使用它: ```javascript import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' // 导入你的组件 import Home from './components/Home.vue' import About from './components/About.vue' import Contact from './components/Contact.vue' // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] }) const app = createApp(App) // 将路由实例挂载到根组件 app.use(router) app.mount('#app') ``` 在上述示例中,我们创建了一个Vue Router实例,并定义了三个路由。每个路由都有一个路径和相应的组件。然后,我们将路由实例通过`app.use(router)`挂载到根组件中,这样就可以在整个应用程序中使用路由了。 接下来,在你的模板中使用`<router-view>`来展示路由组件: ```html <template> <div> <router-view></router-view> </div> </template> ``` 这样,当用户访问不同的路径时,相应的路由组件就会被动态加载和渲染到`<router-view>`中。 希望这个简单的示例能帮助你了解如何在Vue 3中使用路由。更多关于Vue Router的功能和选项,请参考Vue Router的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值