坐忘道

Appearance

路由 ​

Vue Router是Vue.js官方的路由解决方案, 专门为Vue3设计的Vue Router 4提供了构建单页面应用(SPA)所需的核心路由功能

核心概念 ​

  • 路由映射: 将 URL 路径映射到对应的 Vue 组件
  • 动态路由: 支持参数化的路径匹配
  • 嵌套路由: 支持路由视图的多级嵌套
  • 编程导航: 通过代码控制路由跳转
  • 导航守卫: 控制路由的访问权限和生命周期

基本配置 ​

安装 ​

bash
# 在 Vue 3 中使用路由需要 Vue Router 4 版本
npm install vue-router@4

使用 ​

在src目录下新建router文件夹用于存放路由配置文件

  • router/index.ts路由配置文件
ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})
export default router
  • src/main.ts中注册
ts
import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'

createApp(App).use(router).mount('#app')
  • src/App.vue使用
vue
<template>
  <div class="app">
    <h2 class="title">Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import { RouterLink, RouterView } from 'vue-router'  
</script>

注意

  1. 路由组件通常存放在pages或views文件夹中, 一般组件通常存放在components文件夹
  2. 通过点击导航, 视觉效果上消失了的路由组件, 默认是被卸载掉的, 需要的时候再去挂载

to 的两种跳转方式 ​

  • to字符串方式
vue
<router-link active-class="active" to="/home">主页</router-link>
  • to对象方式
vue
<router-link active-class="active" :to="{ path: '/home' }">主页</router-link>

路由工作模式 ​

路由有两种模式:

  1. history模式
  2. hash模式

history 模式 ​

优点: URL链接不带#更加美观, 更接近传统的网站URL, 利于SEO

缺点: 后期项目上线, 需要服务端配合处理路径问题, 否则刷新页面会有404错误

  • 使用history模式
ts
// router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // history 模式
  // ...
})

hash 模式 ​

优点: 不需要服务器端处理URL路径, 兼容性更好

缺点: URL带有#不太美观, 且在SEO优化方面相对较差

  • 使用hash模式
ts
// router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(), // hash 模式
  // ...
})

命名路由 ​

作用 ​

使用name给路由规则命名, 可以简化路由跳转及传参

使用 ​

  • 路由规则命名
ts
// router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history:createWebHistory(),
  routes: [
    {
      name: 'zhuye',
      path: '/home',
      component: Home
    },
    {
      name: 'xinwen',
      path: '/news',
      component: News,
    },
    {
      name: 'guanyu',
      path: '/about',
      component: About
    }
  ]
})
  • 路由跳转
vue
<!-- 未命名: 需要写完整的路径(to 字符串跳转) -->
<router-link to="/news/detail">跳转</router-link>

<!-- 命名后: 直接通过名字跳转(to 对象跳转) -->
<router-link :to="{ name: 'guanyu' }">跳转</router-link>

嵌套路由 ​

使用children配置项配置嵌套的多层级路由

  • 代码示例
ts
// router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history:createWebHistory(),
  routes: [
    {
      name: 'zhuye',
      path: '/home',
      component: Home
    },
    {
      name: 'xinwen',
      path: '/news',
      component: News,
      children: [
        name:'xiang',
        path:'detail',
        component:Detail
      ]
    },
    {
      name: 'guanyu',
      path: '/about',
      component: About
    }
  ]
})

export default router

注意

  • 使用路径跳转路由时需要使用完整路径, 如/news/detail
  • 需要多预留一个<router-view />标签用于展示子路由

路由传参 ​

使用路由传递参数有两种方式:

  • query传参
  • params传参

query 参数 ​

  • 传递参数
vue
<!-- 跳转并携带 query 参数: to 字符串方式 -->
<router-link to="/news/detail?a=1&b=2&content=Welcome">
  跳转
</router-link>

<!-- 跳转并携带 query 参数: to 对象方式 -->
<RouterLink 
  :to="{
    // name:'xiang', // 可以使用 name 跳转
    path: '/news/detail',
    query: {
      a: 1,
      b: 2,
      content: 'Welcome'
    }
  }"
>
  跳转
</RouterLink>
  • 接收参数
ts
import { useRoute } from 'vue-router'

const route = useRoute()

// 打印 query 参数
console.log(route.query)

params 参数 ​

  • 传递参数
vue
<!-- 跳转并携带 query 参数: to 字符串方式 -->
<router-link to="/news/detail/1/2/Welcome">
  跳转
</router-link>

<!-- 跳转并携带 query 参数: to 对象方式 -->
<RouterLink 
  :to="{
    name:'xiang', // 只能使用 name 跳转, 不能使用 path
    params: {
      a: 1,
      b: 2,
      content: 'Welcome'
    }
  }"
>
  跳转
</RouterLink>
  • 接收参数
ts
import { useRoute } from 'vue-router'

const route = useRoute()

// 打印 params 参数
console.log(route.params)

注意

  • 传递params参数时, 若使用to的对象写法, 必须使用name配置项, 不能用path
  • 传递params参数时, 需要提前在规则中占位, 如path: 'detail/:a/:b/:content'

路由的 props 配置 ​

作用 ​

让路由组件更方便的收到参数, 也可以将路由参数作为props传给组件

使用 ​

共有三种使用方式:

1. 对象格式: 把对象中的每一组key-value作为props传给Detail组件

  • 代码示例
ts
{
  name: 'xiang',
  path: 'detail/:id/:title/:content',
  component: Detail,
  props: { a: 1, b: 2, c: 3 }
}

2. 布尔值格式: 把收到了每一组params参数, 作为props传给Detail组件

  • 代码示例
ts
{
  name: 'xiang',
  path: 'detail/:id/:title/:content',
  component: Detail,
  props: true
}

3. 函数格式: 把返回的对象中每一组key: value作为props传给Detail组件

  • 代码示例
ts
{
  name: 'xiang',
  path: 'detail/:id/:title/:content',
  component: Detail,
  props(route) {
    return route.query
  }
}

replace 属性 ​

作用 ​

控制路由跳转时操作浏览器历史记录的模式

在Vue跳转中, 浏览器的历史记录有两种写入方式:

  • push: 追加历史记录, 默认方式
  • replace: 替换当前记录

使用 ​

开启replace模式

vue
<router-link replace active-class="active" to="/home">主页</router-link>

编程式导航 ​

Vue2.x路由组件的两个重要的属性$route和$router, 在Vue3中分别改为了useRoute和useRouter两个hook

  • 代码示例
ts
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

路由重定向 ​

作用 ​

使用redirect配置项将特定的路径重新定向到已有的路由

使用 ​

  • 代码示例
ts
{
  path: '/',
  redirect: '/about'
}