vuejs中路由的嵌套

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号(ID:itclanCoder)

如果不知道如何操作

点击这里,标星不迷路

前言

在做Vue的项目当中,路由的嵌套是一个非常常见的操作,在我们网页界面当中的一些切换,跳转,或多或少都会用到

只要参与开发一些后台管理系统,那必然会用到嵌套路由,涉及到路由的传参等

先来看一个例子,需求,点击左侧边栏,显示一级导航,二级导航切换

6cf712fb0d3019f81dca12912470940d.gif



d19e73435636f61300c327e948dd7dd0.gif

01

路由的设置规则

一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理

前端路由:key是路径,value是组件

import Vue from "vue";
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 实例化router对象,定义一些规则和配置
const router = new VueRouter({
    routers: [
        // 一级路由
        {
            path: '/',
            component: Layout,
            redirect: '/dashboard',
            children: [
                {
                 path: 'dashboard',
                 name: 'Dashboard',
                 component: () => import('@/views/dashboard/index'),
                 meta: { title: 'Dashboard', icon: 'dashboard' }
            }]
        },

        {
    path: '/fontend',     // 一级路由
    name: 'FontEnd',
    component: Layout,
    meta: {
          title: '前端',
          icon: 'nested',
    },
    redirect: '/fontend/html',
    children: [        // 子路由/二级路由
       {             
         path: '',
         name: 'font',
         redirect: '/fontend/html',
         hidden: true,
         component: () => import('@/views/fontend/index'),
        //  meta: {
        //   title: '前端',
        //   icon: 'nested',
        //  },
         children: [   // 二级路由下的子路由
            {
             path: 'html',
             name: 'Html',
             hidden: true,
             component: () => import('@/views/fontend/html.vue'),
         
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由嵌套是指在一个路由下面再嵌套一个或多个路由,这样可以实现更灵活的页面切换和组件复用。下面介绍一下Vue路由嵌套的思路: 1. 定义根路由Vue路由的定义是通过Vue Router实现的。首先需要在Vue实例引入Vue Router,并定义一个根路由,例如: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from './components/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home } ] const router = new VueRouter({ routes }) new Vue({ router }).$mount('#app') ``` 上面的代码,定义了一个根路由,它的路径为'/',对应的组件是Home。可以看到,路由的定义是通过routes数组来实现的,其每个元素表示一个路由,包括路径和对应的组件。 2. 在根路由下定义子路由 在根路由下定义子路由,需要在根路由组件添加一个<router-view>标签,用来展示子路由对应的组件。例如: ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 这个组件添加了一个<router-view>标签,用来展示子路由对应的组件。然后,在根路由的routes数组添加子路由的定义,例如: ```javascript const routes = [ { path: '/', component: Home, children: [ { path: 'about', component: About }, { path: 'contact', component: Contact } ] } ] ``` 上面的代码,定义了两个子路由,分别是/about和/contact,它们的对应的组件分别是About和Contact。可以看到,子路由的定义是通过children属性来实现的。 3. 在子路由对应的组件定义子路由 在子路由对应的组件,也可以定义子路由。例如,在About组件定义一个子路由: ```html <template> <div> <h1>About</h1> <router-view></router-view> </div> </template> <script> export default { name: 'About', mounted () { console.log('About mounted.') }, children: [ { path: 'history', component: History }, { path: 'team', component: Team } ] } </script> ``` 上面的代码,定义了两个子路由,分别是/history和/team,它们的对应的组件分别是History和Team。可以看到,子路由的定义是通过children属性来实现的。 4. 访问路由 访问路由的方式和普通路由是一样的,只需要在路径后面添加对应的子路径即可。例如,访问/about/history这个路由,需要使用以下代码: ```html <router-link to="/about/history">History</router-link> ``` 上面的代码,使用了<router-link>标签来生成一个链接,指向/about/history这个路由。当用户点击这个链接时,Vue会自动切换到对应的组件。 以上就是Vue路由嵌套的思路,通过定义根路由和子路由,可以实现更灵活的页面切换和组件复用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值