安装
yarn add vue-router
使用
HTML:
// App.vue
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
自定义路由组件:
// /components/UserPost.vue
<template>
<div>User {{this.$route.params}} with post {{this.$route.postId}}</div>
</template>
JavaScript:
// main.js
// 从vue-router引入createRouter和createWebHashHistory. 如果不引入的话,
// 使用VueRouter.createRouter()来使用
import {createRouter, createWebHashHistory} from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
// (1)直接定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// (2)从其他组件导入
import UserPost from "./components/UserPost" //(/components/下有一个名为UserPost.vue文件)
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/users/:username/posts/:postId', component: UserPost } // 此路由匹配 http://example.com/users/Jack/posts/123
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes`的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router) // 此时,可以在任意组件中使用this.$router访问路由对象,并以this.$route的形式访问当前路由
app.mount('#app')
// 现在,应用已经启动了!
通过调用 app.use(router),我们可以在任意组件中以 this.$router 的形式访问它,并且以 this.$route 的形式访问当前路由:
路由模式
Vue Router默认采用URL hash模式来保持页面和URL的同步,其创建的URL格式需要包含井号(#),如下所示。
http://pwstrick.com/#/main
Vue Router还有另外一种history模式,利用HTML5 History来保持页面和URL的同步,其创建的URL格式在视觉上更为简洁清晰,如下所示。
http://pwstrick.com/main
在创建路由器实例时,history 配置允许我们在不同的历史模式中进行选择。
Hash 模式
hash 模式是用 createWebHashHistory() 创建的:
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。
HTML5 模式
用 createWebHistory() 创建 HTML5 模式,推荐使用这个模式:
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id。
不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就丑了。
不用担心:要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!
具体见vue router文档-不同的历史记录模式-服务器配置实例部分。
动态路由
Vue Router采用的路径匹配引擎是path-to-regexp,它支持动态路由的匹配,例如有一个List组件,需要根据路径中的页码参数把组件渲染成不同的内容,可以像下面这样配置。
const List = { template: '<div>{{$route.params.page}}</div>' };
const routes = [
{ path: '/list/:page', component: List }
];
在路由配置中,以冒号开头的:page是路径参数,它的值会被保存到路由对象$route的params属性中。路由对象不仅包含解析URL得到的信息(例如路径、查询字符串、锚点等),还有匹配到的路由信息(例如路由名称、路由记录等)。当路径是/list/1时,$route.params的值为{page: 1},params是一个对象,其键值与路径参数对应。注意,一条路径可以包含多个不同的路径参数,比如http://example.com/users/Jack/posts/123对应的路由的params为{username: Jack, postId: 123}。
| 匹配模式 | 匹配路径 | $route.params |
|---|---|---|
| /users/:username | /users/eduardo | { username: ‘eduardo’ } |
| /users/:username/posts/:postId | /users/eduardo/posts/123 | { username: ‘eduardo’, postId: ‘123’ } |
嵌套路由
一个被渲染的组件也可以包含自己嵌套的 <router-view>。例如,如果我们在 User 组件的模板内添加一个 <router-view>:
// html
<div id="app">
<router-view></router-view>
</div>
// js
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}
// 这些都会传递给 `createRouter`
const routes = [{ path: '/user/:id', component: User }]
// User模板
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`,
}
要将组件渲染到这个嵌套的 router-view 中,我们需要在路由中配置 children属性(和path, component同级):
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功
// UserProfile 将被渲染到 User 的 <router-view> 内部
path: 'profile',
component: UserProfile,
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: 'posts',
component: UserPosts,
},
],
},
]
注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。
如你所见,children 配置只是另一个路由数组,就像 routes 本身一样。因此,你可以根据自己的需要,不断地嵌套视图。
此时,按照上面的配置,当你访问 /user/eduardo 时,在 User 的 router-view 里面什么都不会呈现,因为没有匹配到嵌套路由。也许你确实想在那里渲染一些东西。在这种情况下,你可以提供一个空的嵌套路径:
// 没有匹配到路由时,可以给children提供空的嵌套路径
const routes = [
{
path: '/user/:id',
component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
// 当 /user/:id 匹配成功
// UserHome 将被渲染到 User 的 <router-view> 内部
{ path: '', component: UserHome },
// ...其他子路由
],
},
]
命名路由
可以在配置时为路由标识一个名称,从而就能在使用时省略路径了(否则需要指定的to属性为path指向的路径,如<router-link :to="/about"></router-link>)。
如下所示,name属性的值就是路由名称。
const routes = [
{
path: '/user/:username',
name: 'user',
component: User
}
]
要链接到一个命名的路由,可以向 router-link 组件的 to 属性传递一个对象:
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { username: 'erina' } })
在这两种情况下,路由将导航到路径 /user/erina。
命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。如果 router-view 没有设置名字,那么默认为 default。
即页面上有多个router-view,给每个router-view指定name,让它匹配对应的路由组件。
// html
<router-view class="view left-sidebar" name="LeftSidebar"></router-view> // 匹配LeftSidebar组件
<router-view class="view main-content"></router-view> // 匹配默认组件
<router-view class="view right-sidebar" name="RightSidebar"></router-view> // 匹配RightSidebar组件
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
// LeftSidebar: LeftSidebar 的缩写
LeftSidebar,
// 它们与 `<router-view>` 上的 `name` 属性匹配
RightSidebar,
},
},
],
})
嵌套命名视图见 vue router文档-命名视图-嵌套命名视图部分。
编程式导航
除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
导航到不同的位置
注意:在 Vue 实例中,你可以通过
r
o
u
t
e
r
访
问
路
由
实
例
。
因
此
你
可
以
调
用
t
h
i
s
.
router 访问路由实例。因此你可以调用 this.
router访问路由实例。因此你可以调用this.router.push。
想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 时,内部会调用这个方法,所以点击 相当于调用 router.push(…) :
| 声明式 | 编程式 |
|---|---|
<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' })
重定向和别名
重定向
重定向是指当用户访问 /home 时,URL 会被 / 替换,然后匹配成 /。
在路由配置中,通过redirect选项可重定向到一个新的页面,该选项可取的值有三种,分别是路径、命名路由和回调函数,如下所示,其中函数中的to参数表示目标路由对象。
// router.js
// 配置路由对象数组routes时
// redirect值为路径
const routes = [{ path: '/home', redirect: '/' }] // 当访问url为/home时,自动重定向到/
// redirect值为命名路由
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
// redirect值为方法(回调函数)
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
别名
将 / 别名为 /home,意味着当用户访问 /home 时,浏览器地址栏URL 仍然是 /home,但会被匹配为用户正在访问 /。
例如,路由配置为:
const routes = [{ path: '/', component: Homepage, alias: '/home' }]
导航守卫
导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
Vue Router提供了三类守卫:全局、路由独享和组件级。
全局守卫
全局守卫是指路由实例上直接操作的钩子函数,他的特点是所有路由配置的组件都会触发,直白点就是触发路由就会触发这些钩子函数,如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个(以下的钩子函数都是按执行顺序讲解的):
全局前置守卫 beforeEach()
在路由跳转前触发,参数包括to,from,next(参数会单独介绍)三个,其中to是目标路由对象、from是来源路由对象,next是一个回调函数,用于解析(resolve)当前守卫。这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚。
router.beforeEach((to, from, next) => {
next();
});
全局解析守卫 beforeResolve()
这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个,和beforeEach区别官方解释为:
确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。
即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用。
全局后置钩子 afterEach()
和beforeEach相反,他是在路由跳转完成后触发,参数包括to,from没有了next(参数会单独介绍),他发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫,后讲)之前。
路由独享的守卫
路由独享的守卫是指在单个路由配置的时候也可以设置的钩子函数,其位置就是下面示例中的位置,也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter:
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]
beforeEnter 守卫 只在进入路由时触发,不会在 params、query 或 hash 改变时触发。例如,从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时,才会被触发。
组件守卫
可以在路由组件内直接定义路由导航守卫(传递给路由配置的)。可以为路由组件添加以下配置:
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` !
// 因为当守卫执行时,组件实例还没被创建!
},
beforeRouteUpdate(to, from) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,
// 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`
},
}
(1)beforeRouteEnter():由于该组件在导航确认前被调用,因此组件还未被创建,从而访问this无法得到组件实例。但next()函数能接收一个参数为组件实例的回调,如下所示。
const List = {
beforeRouteEnter: function(to, from, next) {
next(vm => {
//vm是组件实例
});
}
};
(2)beforeRouteUpdate():可通过this得到组件实例,当路由发生变化,但复用了一个组件时,会调用该守卫。例如一个路径为/list/:page的路由(如下配置所示),在将/list/1导航至list/2时,由于渲染的都是List组件,因此会调用beforeRouteUpdate()守卫。
const routes = [
{
path: "/list/:page",
component: List
}
];
(3)beforeRouteLeave():也可通过this得到组件实例,当路由改变,并且渲染的组件不同时,会调用该守卫。例如有两条路径/main和/list,分别对应Main和List组件,在List组件中声明了beforeRouteLeave()守卫(如下所示),当从/list导航至/main时,会弹出确认框,判断是否需要取消本次导航。
const List = {
beforeRouteLeave: function(to, from, next) {
const answer = window.confirm("是否离开当前页?");
answer ? next() : next(false);
}
};
导航守卫回调参数
to:目标路由对象;
from:即将要离开的路由对象;
next:他是最重要的一个参数,他相当于佛珠的线,把一个一个珠子逐个串起来。以下注意点务必牢记:
1.但凡涉及到有next参数的钩子,必须调用next() 才能继续往下执行下一个钩子,否则路由跳转等会停止。
2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。(主要用于登录验证不通过的处理)
3.当然next可以这样使用,next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。意思是当前的导航被中断,然后进行一个新的导航。可传递的参数与router.push中选项一致。
4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。
5.next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫(2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
参考:
Vue3 路由 | 菜鸟教程
Vue Router 官方教程
Vue躬行记(8)——Vue Router
vue-router导航守卫,不懂的来
这篇博客深入解析了Vue Router的使用,包括安装、路由模式(Hash和HTML5)、动态路由、嵌套路由、命名路由和命名视图、编程式导航、重定向和别名,以及导航守卫(全局、路由独享和组件级别)。文章通过实例展示了如何配置和应用这些特性,帮助开发者更好地理解和掌握Vue应用的路由管理。
3456

被折叠的 条评论
为什么被折叠?



