vue-router

路由模块的本质 就是建立起url和页面之间的映射关系。

路由模式：

• hash模式：（默认）http://abc.com/#/user/10
• history模式：http://abc.com/user/10
• 后者需要sever端支持，无特殊需求选择前者

页面跳转的方式：

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：<router-link to="路由地址"></router-link>

vue3路由跳转
组件引入 import { useRouter } from 'vue-router'

实例化 const router = useRouter()
使用 router.push('/home')

路由传参

query传参

<router-link :to="{ path:'/admin',query: { queryId: status }}" >router-link跳转Query</router-link>
或
this.$router.push({path:'/admin',query:{id:1}})

params传参
this.$router.push({path:"/admin",query:{id:1}})

    /*路由配置了动态的id*/
    {
        path: "/user/:id",
        component: user
    }

嵌套路由

路由内嵌套自己的子路由，需要在该路由内使用router-view标签

   routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
      {path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
        {path: '/h2', name: 'H2', component: H2}
      ]
    }
  ]