Vue3 子路由嵌套跳转失败，去掉#等杂题（简单易懂，不罗嗦）

先上一下代码（router下的index.js)

const routes = [
  {
    path: "/",
    name: "导航一",
    component: index,
    redirect: "/pageOne",
    children: [
      {
        path:"/pageOne",
        name: "页面一",
        component: pageOne
      },
      {
        path:"/pageTwo",
        name: "页面二",
        component: pageTwo
      }
    ]
  },
  {
    path: "/navigation",
    name: "导航二",
    component: index,
    children: [
      {
        path:"/pageThree",
        name: "页面一",
        component: pageThree
      },
      {
        path:"/pageFour",
        name: "页面二",
        component: pageFour
      }
    ]
  }
]

先来说一下我跳转失败的原因

上面的name属性重名了，导致了跳转失败
（真想一巴掌扇死自己）

子路由中要不要加/

• 不加：就是路径叠加。要访问的话，父路径加子路径。
• 加：子路径自己作为访问节点

举个例子

{
    path: "/navigation",
    name: "导航二",
    component: index,
    children: [
      {
        path:"pageThree",
        name: "页面一",
        component: pageThree
        <!--访问路径就是/navigation/pageThree-->
      },
      {
        path:"/pageFour",
        name: "页面二",
        component: pageFour
        <!--访问路径就是/pageFour-->
      }

怎么去掉网址栏中的#

网上一堆讲的都是关于vue2的
直接修改router文件夹下的index.js就行

1. 把history: createWebHashHistory()改为 history: createWebHistory()
2. 再把最上面的修改为import {createRouter, createWebHistory} from ‘vue-router’