首先要导入依赖
npm
npm install vue-router@4yarn
yarn add vue-router@4可以去官方网站看看文档
安装完依赖之后
在main.js里导入并使用router
import router from './router'
const app=createApp(App);
app.use(router).mount('#app');然后在App.vue里
<router-view/>这个标签是用来显示你路由跳转的页面的。
然后在src/router/index.js里添加 (如果没有的话直接创建就可以了)
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/about',
name: 'about',
component: () => import( '../views/AboutView.vue')
},
{
path: '/xx', //访问这个路径就跳转
name: 'xx', //每个页面的name都唯一，后面也可以通过这个跳转页面
component: () => import( '../views/AboutView.vue') //路由懒加载
},
]
const router = createRouter({
history: createWebHashHistory(), //路径里没有#，是vue默认的模式
routes //上面定义的路径对象数组
})
export default router //暴露router，在其他页面可以通过this.$router访问对象然后就可以访问了
嵌套路由
上面写的是第一层路由，我们可以在上面的页面里再嵌套一个路由，不过这样的话页面里必须有router-view 来占位,这样的话就只能显示再当前页面下，相当于子页面。
写法
{ path: '/update', name: 'update', children:[ { path: 'add', name: 'add', component: () => import( '../views/AddUser.vue') }, ], component: () => import( '../views/UpdateView.vue') },子路径里的path是不需要/的。
2.5.1 带参数的动态路由匹配
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数
User.vue
<template>
<h2>用户:</h2>
</template>
<script>
export default {
name: 'User',
data() {
return {
};
},
};
</script>
<style lang="css" scoped>
</style>配置路由:
{ path: '/users/:id', component: ()=>import('../views/User') },现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。
获取动态路由的值:
路径参数用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：
<template>
<h2>用户:{{$route.params.id}}</h2>
</template>
在template中，直接通过
$route.params获取值；
在created中，通过
this.$route.params获取值；在setup中，我们要使用 vue-router库给我们提供的一个hook的useRoute； 该Hook会返回一个Route对象，对象中保存着当前路由相关的值
你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：
| 匹配模式 | 匹配路径 | $route.params |
|---|---|---|
| /users/:username | /users/eduardo | { username: 'eduardo' } |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | { username: 'eduardo', postId: '123' } |
注意:
使用
$route会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过props配置来解除这种行为：我们可以将下面的代码:
替换成:
当
props设置为true时，route.params将被设置为组件的 props
query方法传参
<li v-for=" ad in adList">
<!-- to的对象写法:-->
<router-link :to="{x`
path:'/home/ad/detail',
query:{
id:ad.id,
title:ad.title
}
}">{{ad.title}}</router-link>
</li>如果有红线报错出现，那是因为TypeScript对js的语法检测，关闭即可。
命名路由
除了
path之外，你还可以为任何路由提供name。这有以下优点：
没有硬编码的 URL
params的自动编码/解码。防止你在 url 中出现打字错误。
绕过路径排序（如显示一个）
如果使用params传递参数, 不能写path,只能写name
<li><router-link :to="{ name: 'user', params: { id: '101' }}">User</router-link></li> 编程式导航
在 Vue 实例中，你可以通过
$router访问路由实例。因此你可以调用this.$router.push。想要导航到不同的 URL，可以使用
router.push方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。当你点击
<router-link>时，内部会调用这个方法，所以点击<router-link :to="...">相当于调用router.push(...)：
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })注意：如果提供了
path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：
const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
页面的前进后退
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
router也有back： 通过调用 history.back() 回溯历史。相当于 router.go(-1)；
router也有forward： 通过调用 history.forward() 在历史中前进。相当于 router.go(1)；