Vue Router 路由的创建和基本使用（超详细）

3.2 路由的两种工作模式

路由有两种工作模式，它们各有什么特点，该如何选择呢？

3.2.1 history 模式（createWebHistory）

const router = createRouter({history: createWebHistory(), // history模式// ...路由规则
});

• 优点：URL 更加美观，不带有 #，更接近传统网站的 URL
• 缺点：项目上线后，需要服务端配合处理路径问题，否则刷新页面可能会出现 404 错

3.2.2 hash 模式（createWebHashHistory）

const router = createRouter({history: createWebHashHistory(), // hash模式// ...路由规则
});

3.4.1 写法一：对象型path写法  :to"{path:'src'}"

 <router-link :to="{path:'/home'}" active-class="active">首页</router-link>

适用于需要动态生成路径或携带参数的场景。

3.4.2 写法二：字符串写法（简写）：to:"src"

<routerLink to="/about" active-class="active">关于</routerLink>

适用于路径固定的简单场景，写法简洁。

3.4.3 写法三：对象型name写法  :to"{name:'name'}"

<routerLink :to="{name:'new'}" active-class="active">新页面</routerLink>

需要先在路由规则中配置 name 属性，优点是当路径发生变化时，只需修改路由规则中的 path，不需要修改所有导航链接。

3.4.4 设置replace禁止返回上一个页面

使用replace清除浏览器的历史记录，不能返回上次浏览页面。

<router-link replace :to="{path:'/home'}" active-class="active">首页</router-link>
<routerLink replace to="/about" active-class="active">关于</routerLink>
<routerLink replace :to="{name:'new'}" active-class="active">新页面</routerLink>

四、路由嵌套

在实际开发中，我们经常会遇到页面中嵌套子页面的情况，比如新闻页面中嵌套新闻详情，这时就需要用到嵌套路由。

如何配置嵌套路由呢？

1. 编写子组件（如 NewsDetail.vue）

2. 在路由规则中使用 children 配置项

// src/router/index.ts
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";
import Home from "../views/homeView.vue";
import About from "../views/aboutView.vue";
import New from "../views/newView.vue";
import NewList from "../views/newlistView.vue";
const roter =  createRouter({history:createWebHashHistory(),routes:[// 路由规则{path: "/home", // 路径name: "home", // 路由名称component: Home // 对应的组件},{path: "/about",name: "about",component: About},{path: "/New",name: "new",component: New,children:[{path:"NewList",name:"NewList",component:NewList}]},]
})
// 抛出路由对象，用于挂载到Vue实例中
export default roter

注意：

子路由不需要加"/",否则不会被识别为子路由！！！

在新闻页面添加路由导航和路由渲染：

// src/views/newList.vue
<template><h1>我是新闻页面</h1><router-link to="/new/NewList">新闻详情</router-link><router-view></router-view>
</template>

五、路由传参

在页面跳转时，我们经常需要传递参数（如新闻 ID、用户 ID 等），Vue Router 提供了两种主要的传参方式：query 传参和 params 传参。

5.1 to + query 传参

query 传参的参数会显示在 URL 中，形如 ?id=1&title=新闻标题。

query传参的路径样式：

5.1.1 模板字符串的 query 传参

①路由设置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要设置参数path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由传递参数

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新闻标题1',content: '新闻内容1'},{id: 1002,title: '新闻标题2',content: '新闻内容2'},{id: 1003,title: '新闻标题3',content: '新闻内容3'},{id: 1004,title: '新闻标题4',content: '新闻内容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link  :to="`/newList/newDetail?id=${anew.id}&title=${anew.title}&content=${anew.content}`">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template><style scoped></style>

③子路由接受参数

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.1.2 query 传参 + 对象型参数

①路由设置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要设置参数path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由传递参数

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新闻标题1',content: '新闻内容1'},{id: 1002,title: '新闻标题2',content: '新闻内容2'},{id: 1003,title: '新闻标题3',content: '新闻内容3'},{id: 1004,title: '新闻标题4',content: '新闻内容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{path:'/newList/newDetail',query:{id:anew.id,title:anew.title,content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受参数

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.1.3 name + query 传参 + 对象型参数

①路由设置

{path: '/newList',name: 'newList',component: newListView,children:[{// 不要设置参数path: 'newDetail',name: 'newDetail',component: newDetailView,}]
},

②父路由传递参数

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新闻标题1',content: '新闻内容1'},{id: 1002,title: '新闻标题2',content: '新闻内容2'},{id: 1003,title: '新闻标题3',content: '新闻内容3'},{id: 1004,title: '新闻标题4',content: '新闻内容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{name:'newDetail',query:{id:anew.id,title:anew.title,content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受参数

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{route.query.id}}</li><li>{{route.query.title}}</li><li>{{route.query.content}}</li></ul>
</template>

5.2 to + params 写法传参

params 传参的参数需要在路由路径中占位，URL 形式如 /news/detail/1/新闻标题。

5.2.1 params 传参 + 模板字符串

①路由设置

{path: '/newList',name: 'newList',component: newListView,children:[{// 设置参数为路径的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,}]
},

②父路由传递参数

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新闻标题1',content: '新闻内容1'},{id: 1002,title: '新闻标题2',content: '新闻内容2'},{id: 1003,title: '新闻标题3',content: '新闻内容3'},{id: 1004,title: '新闻标题4',content: '新闻内容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="`/newList/newDetail/${anew.id}/${anew.title}/${anew.content}`">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受参数

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{route.params.id}}</li><li>{{route.params.title}}</li><li>{{route.params.content}}</li></ul>
</template>

5.2.2 name + params 传参 + 对象型参数

①路由设置

{path: '/newList',name: 'newList',component: newListView,children:[{// 设置参数为路径的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,}]
},

②父路由传递参数

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import {reactive} from "vue";
const news = reactive([{id: 1001,title: '新闻标题1',content: '新闻内容1'},{id: 1002,title: '新闻标题2',content: '新闻内容2'},{id: 1003,title: '新闻标题3',content: '新闻内容3'},{id: 1004,title: '新闻标题4',content: '新闻内容4'},
])
</script><template><div class="nav" v-for="anew in news" >  // 注意<router-link :to="{name:'newDetail',params:{id:anew.id, title:anew.title, content:anew.content}}">{{anew.title}}</router-link></div><div class="content"><router-view></router-view></div>
</template>

③子路由接受参数

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{route.params.id}}</li><li>{{route.params.title}}</li><li>{{route.params.content}}</li></ul>
</template>

5.3  defineProps接受参数小技巧

这样传递过来的参数获取起来大家会不会觉得写起来很复杂，其实使用defineProps就可以很好的解决父组件向子组件传参的问题得到解决：

①在路由中修改

{path: '/newList',name: 'newList',component: newListView,children:[{// 设置参数为路径的一部分path: 'newDetail/:id/:title/:content',name: 'newDetail',component: newDetailView,// 设置为defineProps为tureprops: true,}]
},

②在子组件中修改

<script setup lang="ts">
import { useRoute} from 'vue-router'
const route = useRoute()
// 接受路由参数
defineProps(['id', 'title', 'content'])
</script><template><h2>news详情页面</h2><ul>// 注意怎么访问参数<li>{{id}}</li><li>{{title}}</li><li>{{content}}</li></ul>
</template>

5.4 query 传参 vs params 传参 总结