Vue3(三)路由基本使用、工作模式(history,hash)、query传参和param传参、props配置、编程式路由导航

一、路由的基本使用

1. 安装：npm i vue-router

2. 在src/pages文件下，创建三个路由组件(Home\About\News,具体内容不写了)

3. 创建路由器(src/routers/index.ts)

   // 创建一个路由器并暴露出去
   // 1. 引入createRouter
   import { createRouter,createWebHistory } from "vue-router";// 2. 引入路由组件
   import Home from '../pages/Home.vue'
   import About from '../pages/About.vue'
   import News from '../pages/News.vue'// 3. 创建一个路由器
   const router = createRouter({history:createWebHistory(), // 必须指定路由工作模式routes:[// 重定向，不加重定向，会报警告 No match found for location with path "/"{path:'/',redirect:'/home'},// 通过name属性，给路由命名{name:'/shouye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News},{name:'guanyu',path:'/about',component:About}]
   })
   export default router
   

4. main.ts中引入路由器

   // 引入createApp用于创建应用
   import { createApp } from "vue"
   // 引入App根组件
   import App from "./App.vue"
   // 引入路由器
   import router from './router'
   // 创建一个应用
   const app = createApp(App)
   // 使用路由器
   app.use(router)
   // 挂载整个应用到app容器中
   app.mount("#app")
   

5. App组件中使用路由组件
   RouterLink和RouterView的作用与vue2中的router-link,router-view的作用一样。
   active-class绑定组件激活时的样式。当组件激活时（active的样式还是要自己写），会自动添加样式active

   <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>
   <style>.navigate a.active {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;
   }
   </style>
   

   

1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2. 点击首页，首页组件挂载，展示首页组件内容。再点击新闻，新闻组件挂载并显示该组件内容。首页组件则默认被卸载(onUnmounted)
3. 重定向： 将特定的路径，重新定向到已有路由。否则页面一打开，路径是/，不对应任何路由组件，页面会空白
4. 通过name属性，给路由命名

二、路由器的工作模式

与vue2中的工作模式一样，就是设置模式的方式不一样；Vue(十三) 路由器的两种工作模式

1. history模式

   优点：URL更加美观，不带有#。

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

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

2. hash模式

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

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

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

三、RouterLink中to的两种写法

<!-- 字符串写法 -->
<RouterLink to="/about" active-class="active">关于</RouterLink>
<!-- 对象写法 -->
<RouterLink :to="{ path: '/about' }" active-class="active">关于</RouterLink>
<RouterLink :to="{ name: '/guanyu' }" active-class="active">关于</RouterLink>

四、嵌套路由

1. 创建路由组件 Detail.vue
2. 配置路由规则 src/router/index.ts

 {name:'xinwen',path:'/news',component:News,children:[{name:'xiangqing'path:'detail', // 注意这里不用加'/'component:Detail}]},

3. News组件：

<template><!-- 新闻 --><div class="news"><ul><li v-for=" n in news" :key="n.id"><RouterLink :to="'/news/detail'">{{ n.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template>

五、路由传参

无论点击展示区的哪个title，右边详情区的内容应该展示对应的信息。

1. query传参

传参的两种形式：

<!--src/pages/News.vue-->
<ul><li v-for=" n in news" :key="n.id"><!-- 第一种，字符串，用?拼接query参数 --><RouterLink :to="`/news/detail?id=${n.id}&title=${n.title}&content=${n.content}`">{{ n.title }}</RouterLink><!-- 第二种，对象写法 --><RouterLink :to="{path: '/news/detail',query: {id: n.id,title: n.title,content: n.content}}">{{ n.title }}</RouterLink></li>
</ul>

Detail组件接收参数

<template><ul class="news-list"><li>编号:{{ query.id }}</li><li>标题:{{ query.title }}</li><li>内容:{{ query.content }}</li></ul>
</template>
<script setup lang="ts" name="About">import { useRoute } from 'vue-router'import { toRefs } from 'vue'// 获取route信息let route = useRoute()console.log(route);// 解构出来不是响应式数据，需要通过toRefs将其转为响应式数据let { query } = toRefs(route)
</script>

可以看出route是个响应式数据

2. params传参

(1). 传递参数
params传参的两种写法

<ul><li v-for=" n in news" :key="n.id"><!-- 第一种,字符串 --><RouterLink :to="`/news/detail/${n.id}/${n.title}/${n.content}`">{{ n.title }}</RouterLink> <!-- 第二种, 对象写法,注意不可用path，需要用name属性指定路由 --><RouterLink :to="{name: 'xiangqing',params: {id: n.id,title: n.title,content: n.content}}">{{ n.title }}</RouterLink></li>
</ul>

需要提前占位，因为params参数属于路径的一部分。如果没占位，假设路径为：/news/detail/123/title/content；路由中没有这样的路径，就会报错。

  {name:'xinwen',path:'/news',component:News,children:[{name:'xiangqing',path:'detail/:id/:title/:content?',component:Detail}]},

?表示content这个参数可传可不传。

(2). 读取参数

注意点1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
注意点2：传递params参数时，需要提前在规则中占位。

六、路由的propos配置

这个在vue2中也说过。
propos属性的作用是少写重复项，让路由组件更方便的接收到参数。
Vue(十三) 路由器的propos配置

(1) 写法一: props:true,

  {name:'xinwen',path:'/news',component:News,children:[{name:'xiangqing',path:'detail/:id/:title/:content?',component:Detail,// 第一种写法,将路由收到的所有params参数传递给Detail组件.props:true,}]},

只适用于params参数，props：true时相当于这样传递参数：
<Detail id=xxx title=xxx content=xxx>

(2) 写法二:函数式写法

 children:[{name:'xiangqing',path:'detail',component:Detail,// 第二种写法,函数写法,传递params参数或者props参数props(route){return route.query}}]

(3) 写法三:固定值，不推荐

  props:{id:123,title:'tom',content:'tom and jerry'}

七、编程式路由导航

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

import { useRouter } from 'vue-router'
let router = useRouter()
// pushAPI，追加历史记录router.push({name: 'xiangqing',query: {id: n.id,title: n.title,content: n.content}})// replace，替换当前历史记录router.replace({... })

push里的值可声明式导航RouterLink里的to属性值一致。to的值可以怎么写，push等API里就可以怎么写。