路由（vue3）学习笔记

路由

路由主要用于构建单页面应用程序（SPA），所有页面都在同一个HTML页面中加载，通过JavaScript脚本动态切换不同的内容

安装

导入路由对应的依赖

npm install vue-router@4

创建路由配置文件

在src目录下新建一个router目录，在router目录下新建一个index.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

		}

	]

})

export default router

加载路由到main文件中

import router from'./router/index'

app.use(router)

app.mount('#app')

注意点

1. 路由组件通常存放在`pages` 或 views文件夹，一般组件通常存放在`components`文件夹。

2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被*卸载*掉的，需要的时候再去*挂载*。

创建Vue组件

创建一个Home.vue和一个About.vue组件

<template>

  <h3>Home</h3>

</template>

<script setup lang="ts">

</script>

在App.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>

    </div>

    <!-- 展示区 -->

    <div class="main-content">

      <RouterView></RouterView>

    </div>

  </div>

</template>

<script setup lang="ts">

  import {RouterLink,RouterView} from 'vue-router'

</script>

<style scoped>

 .navigate> a {

   margin-left: 10px

 }

</style>

效果如下：

<router-link> 是 Vue Router 提供的一个组件，用于生成导航链接。它类似于 HTML 中的 <a> 标签，但专门用于 Vue Router 的路由跳转。

<router-link> 会根据传入的 to 属性生成一个 <a> 标签，并且在点击时不会重新加载页面，而是通过 Vue Router 的内部机制实现页面的跳转。

<router-view> 是 Vue Router 提供的另一个组件，用于显示当前路由匹配到的组件内容。它是路由系统的出口点，负责根据当前的 URL 显示对应的组件。

路由器工作模式

1. history模式

- 优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。

- 缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。

const router = createRouter({

  history:createWebHistory(), // history 模式

})

浏览器效果：

2. hash模式

- 优点：兼容性更好，因为不需要服务器端处理路径。

- 缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。

const router = createRouter({

	history:createWebHashHistory(), //hash模式

})

浏览器效果：

to的两种写法

1. to 属性加上字符串

2. :to 属性加上对象

 
 <!-- 第一种：to的字符串写法 -->
 <router-link active-class="active" to="/home">主页</router-link>
 ​
 ​
 <!-- 第二种：to的对象写法 -->
 <router-link active-class="active" :to="{path:'/home'}">主页</router-link>
 ​

命名路由

给路由规则命名：

 routes:[
   {
     name:'zhuye',
     path:'/home',
     component:Home
   },
   {
     name:'xinwen',
     path:'/news',
     component:News,
   },
   {
     name:'guanyu',
     path:'/about',
     component:About
   }
 ]

to的对象写法可以通过路由名称跳转

 <!--  第二种还可以通过路由名称访问    -->
 <RouterLink  active-class="active" :to="{name: 'about'}">关于</RouterLink>

嵌套路由

嵌套路由的配置是通过在路由定义中使用 children 属性来实现的。children 是一个数组，包含子路由的定义。

示例：嵌套路由配置

新闻页面，有一个子页面Detail，Detail.vue如下：

  <template>
   <p>这里展示新闻内容</p>
 </template>
 ​
 <script setup lang="ts">
 ​
 </script>

在路由配置中修改news组件

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

children 中配置子路由，与外层路由写法一致，可以多层嵌套

效果如下：

路由传参

1.动态路由参数

动态路由参数是通过在路由路径中定义占位符来实现的，如/news/detail/:id。这些参数会在路由匹配时被捕获，并可以通过 $route.params 访问。

配置动态路由

在路由配置中，使用 :paramName 的形式定义动态参数。例如：

 const routes = [
   {
     name: "detail",
     path: '/news/detail/:id', // 动态参数 `id`
     component: Detail
   }
 ];

传递动态参数

在 <router-link> 中，可以通过 to 属性传递动态参数。to 可以是一个字符串，也可以是一个对象。

 //字符串形式
 <RouterLink :to="`/news/detail/${id}`">新闻一</RouterLink>

 //对象形式
 <RouterLink :to="{ name: 'detail', params: { id: 123 } }">新闻一</RouterLink>

接收动态参数

在目标组件中，可以通过 useRoute().params 访问动态参数：

 import {useRoute} from'vue-router'
 ​
 let params = useRoute().params;
 console.log("params ", params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。

2.查询参数（Query Parameters）

查询参数是附加在 URL 的末尾，以 ?key=value 形式存在的参数。它们不会影响路由的匹配，但可以通过 $route.query 访问。

传递查询参数

在 <router-link> 中，可以通过 query 属性传递查询参数：

 //字符串形式
 <RouterLink :to="`/news/detail/id=${id}`">新闻二</RouterLink>

 //对象形式
 <RouterLink :to="{ path: '/news/detail', query: { id: '123'} }">新闻二</RouterLink>

这将生成类似以下的 URL：

 /new/detail?id=123

接收查询参数

在目标组件中，可以通过 useRoute().query 访问查询参数：

 import {useRoute} from'vue-router'
 let query = useRoute().query;
 ​
 console.log("query ", query)

路由的props配置

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

props 配置的三种方式：

1. 布尔值方式（props: true）

这是最简单的配置方式。将 props 设置为 true 时，Vue Router 会自动将路由的 params 参数作为 props 传递给目标组件。这种方式只能处理 params 参数，不能处理 query 参数

 const routes = [
   {
     path: '/user/:id',
     component: UserDetail,
     props: true
   }
 ];

组件中接收参数：

 <script setup>
 import { defineProps } from 'vue';
 ​
 const props = defineProps({
   id: String
 });
 </script>

2.函数方式

如果需要对路由参数进行处理后再传递给组件，可以使用函数式配置。这种方式允许你根据路由信息（如 params、query 等）动态生成 props

 const routes = [
   {
     path: '/user/:id',
     component: UserDetail,
     props: (route) => ({
       //这里能拿到route，可以将里面的query和params参数拿出来，处理然后再下面配置传给接收者
       id: route.params.id,
       title: `用户 ${route.params.id} 的详情页`
     })
   }
 ];

3. 对象方式

这种方式允许你直接定义一个静态的 props 对象传递给组件。这种方式不依赖于路由参数，因此灵活性较差。

 const routes = [
   {
     path: '/user/:id',
     component: UserDetail,
     props: {
       staticProp: '这是一个静态值'
     }
   }
 ];

 {
     name:'detail',
     path:'detail/:id/:title/:content',
     component:Detail,
 ​
   // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
   // props:{a:1,b:2,c:3}, 
 ​
   // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
   // props:true
   
   // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
   props(route){
     return route.query
   }
 }

replace属性

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

浏览器的历史记录有两种写入方式：分别为push和replace：

• push是追加历史记录（默认值）。

• replace是替换当前记录。

1. 开启replace模式：

 <RouterLink replace .......>News</RouterLink>

编程式导航

作用：不通过点击 RouterLink标签，在代码中手动触发跳转到目标路由

路由组件的两个重要的属性：$route和$router变成了两个hooks

 import {useRoute,useRouter} from'vue-router'
 ​
 const router = useRouter()
 ​
 let jump = () => {
   console.log("手动跳转到新闻一")
   router.push({
     path: "/news/detail",
     query: { id: 123 }
   })
 }

重定向

作用：将特定的路径，重新定向到已有路由。

 {
     path:'/',
     redirect:'/about'
 }