vue-03-路由-二三级路由跳转

╰+攻爆jí腚メ 2023-07-20 10:35 11阅读 0赞

1、新建项目之后，在 components 文件夹下，新建 about 文件夹

2、引入二级路由，同样的是在main.js 文件下引入，这四个组件都是在 components/about 这个文件夹下，所以路径要写对

//二级路由引入
    import Contact from './components/about/Contact'
    import Delivery from './components/about/Delivery'
    import History from './components/about/History'
    import OrderingGuide from './components/about/OrderingGuide'

3、配置二级路由，因为二级路由都是在 about.vue 页面显示的，所以应该写在一级路由 about 的内部，在内部添加一个 children 属性，值为一个数组，数组内部存在多个路由对象，对象内部存在 path 、name、component 三个属性

//配置路由
    const routes = [                       
      { path: '/', name:"indexLink", component: Home },
      { path: '/menu', name:"menuLink", component: Menu },
      { path: '/login', name:"loginLink", component: Login },
      { path: '/register', name:"registerLink", component: Register },
      { path: '/admin', name:"adminLink", component: Admin },
      { path: '/about', name:"aboutLink", component: About ,children:[
        { path: '/about/contact', name:'contactLink' , component: Contact },
        { path: './delivery', name:'deliveryLink' , component: Delivery },
        { path: './history', name:'historyLink' , component: History },
        { path: './orderingGuide', name:'orderingGuideLink' , component: OrderingGuide },
      ]},
      { path: '*', redirect:  "/menu" },
    ]

页面效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70][]

4、配置3级路由。若是还存在三级路由，那就找到对应页面，在对应页面路由的内部继续引入，我现在是在联系我们内部引入的，所以新建一个文件夹，用来盛放三级路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1][]

5、 重复上述引入二级路由步骤，引入三级路由，注意路由路径。components文件夹下的一级文件，就是一级路由，

about文件夹下的一级文件，就是二级路由，contact文件夹下的一级文件，就是三级路由

//三级路由引入
    import Phone from './components/about/Contact/Phone'
    import PersionName from './components/about/Contact/PersionName'

6、重复上述配置二级路由步骤，配置三级路由

//配置路由
    const routes = [    
       // 一级路由                   
      { path: '/', name:"indexLink", component: Home },
      { path: '/menu', name:"menuLink", component: Menu },
      { path: '/login', name:"loginLink", component: Login },
      { path: '/register', name:"registerLink", component: Register },
      { path: '/admin', name:"adminLink", component: Admin },
      { path: '/about', name:"aboutLink", redirect: "/about/contact", component: About ,children:[
       // 二级路由
        { path: '/about/contact', name:'contactLink' ,redirect:"/about/contact/phoneLink", component: Contact ,children:[
           // 三级路由
          { path: '/about/contact/phoneLink',name:"phoneLink", component: Phone },
          { path: './persionNameLink',name:"persionNameLink", component: PersionName }
        ]},
        { path: './delivery', name:'deliveryLink' , component: Delivery },
        { path: './history', name:'historyLink' , component: History },
        { path: './orderingGuide', name:'orderingGuideLink' , component: OrderingGuide },
      ]},
      { path: '*', redirect:  "/menu" },
    ]

7、二级路由页面。点击切换二级路由

8、三级路由页面。点击切换三级路由

此时，页面已经可以正常切换二级和三级路由了，但是在二级和三级路由中，没有设置默认显示页面，所以在配置 二级 和 三级 路由时设置 redirect 属性，以此来指定显示的二级 和三级 路由， ps：但是，需要注意的是，在一级路由里指定二级路由时，需要是完全一样的路径，其实

path: './delivery', 和 path: '/about/contact', 两个在页面中显示的路径都是一样的，但是指定的时候必须要写成 path: '/about/contact', 这样的

//配置路由
    const routes = [                       
      { path: '/', name:"indexLink", component: Home },
      { path: '/menu', name:"menuLink", component: Menu },
      { path: '/login', name:"loginLink", component: Login },
      { path: '/register', name:"registerLink", component: Register },
      { path: '/admin', name:"adminLink", component: Admin },
      { path: '/about', name:"aboutLink", redirect: "/about/contact", component: About ,children:[
          { path: '/about/contact', name:'contactLink' ,redirect:"/about/contact/phoneLink", component: Contact ,children:[
              { path: '/about/contact/phoneLink',name:"phoneLink", component: Phone },
              { path: './persionNameLink',name:"persionNameLink", component: PersionName }
            ]
        },
        { path: './delivery', name:'deliveryLink' , component: Delivery },
        { path: './history', name:'historyLink' , component: History },
        { path: './orderingGuide', name:'orderingGuideLink' , component: OrderingGuide },
      ]},
      { path: '*', redirect:  "/menu" },
    ]

还有就是，路径配置时，直接写 /about 类似的就是直接在根目录下的，若是写成 ./delivery 类似的，前面加 . 的，就代表是在当前路径下

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70]: /images/20230528/bd4543cc4c8845da8c237ce3e1444162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1]: /images/20230528/eab66a39634a47cfa8281ffc44050d0d.png