路由的工作模式history模式

URL不带#，需要服务的配合处理路径问题，否则刷新会有404错误。

const router = createRouter({
  history: createWebHistory(),
})

hash模式

URL带#, 在SEO优化方面相对较差

SEO（Search Engine Optimization）即搜索引擎优化，是一种通过对网站进行内部调整和优化（如网站结构、内容、代码等）以及外部推广（如链接建设、社交媒体营销等），以提高网站在搜索引擎结果页面（SERP）上的排名，从而增加网站流量和曝光度的技术和策略。

const router = createRouter({
  history: createWebHashHistory(),
})

嵌套路由

使用children属性，在一个视图（组件）中嵌套另一个视图（组件）在一个视图（组件）中嵌套另一个视图（组件）

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/news',
    component: ()=>import("@/components/News.vue"),
    children: [
      {
        path: 'detail',
        component: ()=>import("@/components/Detail.vue")
      }
    ]
  }]
})

路由传参query参数第一种写法（字符串）

传递query参数，直接在路径后面加?key=value&key=value形式

<RouterLink to="/news/detail?item=5">新闻{{ item }}RouterLink>

获取query参数

首先引入vue-router里的useRoute调用useRoute获取到route从route.query里面获取到参数第二种写法（对象）

<RouterLink
    :to="{
      path: '/news/detail',
      query: {
        item,
      },
    }"
    >
    新闻{{ item }}
RouterLink>

params参数第一种写法（字符串）

直接在url后面用/拼接，但是在router.js里面需要在路径提前占位

// News.vue
<RouterLink to="/news/detail/item/5">
    新闻{{ item }}
RouterLink>

// router/index.ts
{
    path: '/news',
    component: ()=>import("@/components/News.vue"),
    children: [
      {
        path: 'detail/:item',
        component: ()=>import("@/components/Detail.vue")
      }
    ]
}

第二种写法（对象）

params传参的对象形式，只能使用name。

<RouterLink
    :to="{
      name: 'detail',
      params: {
        item: 5,
      },
    }"
    >
    新闻{{ item }}
RouterLink>

路由的props属性

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

第一种写法

添加配置props:true手动开启，这种方式返回params参数。

{
    path: '/news',
    component: ()=>import("@/components/News.vue"),
    children: [
      {
        name: "detail",
        path: 'detail/:item',
        component: ()=>import("@/components/Detail.vue"),
        props: true
      }
    ]
}

第二种写法

把query参数以props方式返回

{
    name: "detail",
    path: 'detail',
    component: ()=>import("@/components/Detail.vue"),
    props(route) {
      return route.query
    }
}

replace属性

replace方法是vue-router提供的一个方法，用于替换当前的历史记录条目，而不是像push方法那样添加一个新的历史记录条目。

<RouterLink
    replace
    :to="{
      name: 'detail',
      query: {
        item: 5,
      },
    }"
 >
    新闻{{ item }}
RouterLink>

编程式路由导航

在vue2中是this.$router.push();而在vue3中由于setup中没有this，所以需要引入vue-router里的useRouter钩子函数，创建一个路由。

和router-link一样，可以写字符串，也可以写对象

路由重定向

routes: [{
    path: '/',
    redirect: "/home"
}]