【Vue】Vue-route路由
Vue-router官网
由vue-router模块控制,需要额外安装依赖。参考官网
npm install vue-router --save
组成
- router-link:路由链接,跳转至路由视图,展示指定路由组件信息
- router-view:路由视图,展示路由组件信息
- route:路由信息
- router:路由对象
router-link
路由跳转,类似a标签,路由跳转作用
<router-link to="" />
router-view
路由视图,用于其他组件在该视图位置显示。
<router-view name="name" />
<!-- 可以指定视图名,在路由跳转时可通过视图名指定视图位置跳转路由 -->
route
{
path:'/url',
name:'name',
components:{ // one,two会绑定对应名称的路由视图上<router-view name='name'/>
default: ComponentZero,
one:ComponentOne,
two:ComponentTwo,
},
meta: { transition: 'slide-right' }, // 路由元信息,可以通过router.meta获取指定元信息
component:ComponentZero, //在默认路由视图上跳转
redirect:'', // 重定向,也可详细描述route信息{path:'url'}
children:[ // 嵌套路由
{
path:'/url1', // 即/url/url1/的访问
component:ComponentOne,
},
{
path:'/url2', // 即/url/url2/的访问
component:ComponentTwo,
}
],
beforeEnter:(to, from) => { // 路由守卫,独享
// reject the navigation
return false
},
}
router
{
history:createWebHashHistory(), // history模式,hash式和非hash式
routes:routes,// 绑定路由集
strict: true, // 严格区分大小写,也可在单个路由配置
sensitive: true, // 不区分大小写,也可在单个路由配置
scrollBehavior (to, from, savedPosition) { //滚动行为
// return 期望滚动到哪个的位置
},
}
匹配规则
- 自定义正则
- 可重复参数
- 大小写敏感控制
- 可选参数
const routes = [
// 匹配 /o/3549
{ path: '/o/:orderId' },
// 匹配 /p/books
{ path: '/p/:productName' },
// /:orderId -> 仅匹配数字
{ path: '/:orderId(\\d+)' },
// /:productName -> 匹配其他任何内容
{ path: '/:productName' },
// /:chapters -> 匹配 /one, /one/two, /one/two/three, 等,至少有一个参数,否则异常
{ path: '/:chapters+' },
// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
{ path: '/:chapters*' },
// 匹配 /, /1, /1/2, 等
{ path: '/:chapters(\\d+)*' },
// 将匹配 /users/posva 而非:
// - /users/posva/ 当 strict: true
// - /Users/posva 当 sensitive: true
{ path: '/users/:id', sensitive: true },
// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
{ path: '/users/:id?' },
// 匹配 /users 和 /users/posva
{ path: '/users/:userId?' },
// 匹配 /users 和 /users/42
{ path: '/users/:userId(\\d+)?' },
]
配置&使用
- 定义路由组件component
- 定义路由集routes
- 创建路由实例router
- 选择history模式:hash(路径带#)和H5模式
- 挂载路由到app根
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
// VueRouter : import { createRouter, createWebHistory } from 'vue-router'
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。
// hash 模式 createWebHashHistory()
// H5模式 createWebHistory();
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')
动态路由
- 路径参数用
:
冒号修饰的, - 参数支持正则表达式匹配,
- 代表可以传递动态数据到组件中,并且组件也可以读取参数。
- 通过
$router.param.var-name
接收var-name
变量值 - 支持多个参数绑定和接收
// 这些都会传递给 `createRouter`
const routes = [
// 动态字段以冒号开始
{ path: '/users/:id', component: User },
]
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}
嵌套路由
即由children定义的子路由集。
const routes = [
{
path: '/user/:id',
name: 'user-parent',
component: User,
children: [{ path: '', name: 'user', component: UserHome }],
},
]
导航
- router-link元素方式
- router.push编程方式
- 替换方式:不会向history添加记录
// <router-link :to="...">
// 字符串路径
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' })
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-link :to="..." replace>
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
命名路由
即配置name属性的路由,导航时可绑定name属性。
const routes = [
{
path: '/user/:username',
name: 'user',
component: User,
},
]
// <router-link :to="{ name: 'user', params: { username: 'erina' }}"> User </router-link>
router.push({ name: 'user', params: { username: 'erina' } })
// 导航至 /user/erina
命名视图
即带有name属性路由视图,在路由导航时可通过命名在指定视图上导航
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>
routes: [
{
path: '/',
components: {
default: Home,
// LeftSidebar: LeftSidebar 的缩写
LeftSidebar,
// 它们与 `<router-view>` 上的 `name` 属性匹配
RightSidebar,
},
},
],
重定向和别名
- redirect重定向,分为绝对和相对
- alias 别名,可以单个,也可以多个
const routes = [
{
// 将总是把/users/123/posts重定向到/users/123/profile。
path: '/users/:id/posts',
redirect: to => {
// 该函数接收目标路由作为参数
// 相对位置不以`/`开头
// 或 { path: 'profile'}
return 'profile'
},
},
{ path: '/home', redirect: { name: 'homepage' } }, // 绝对重定向
{ path: '/user', component: Homepage, alias: ['/people', 'list'] }
]
路由组件传参
- 若组件需要接收props参数值,则路由配置时需要声明props为true
- 对于命名视图的路由,则需要针对每个命名视图都要声明props配置
const routes = [
{ path: '/user/:id', component: User, props: true },
{
path: '/users/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
历史模式
- hash模式:createWebHashHistory(),路径带
#
修饰符 - H5模式:createWebHistory(),推荐使用
路由守卫
- 全局守卫
- beforeEach 路由跳转前置处理处理
- beforeResolve 路由解析,导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后调用
- afterEach 路由跳转后置处理,可以分析,修改页面标题等
- 独享守卫
- beforeEnter 独享路由守卫,在配置路由时绑定,只在进入对应路由时触发
- 组件内守卫
- beforeRouteEnter 组件创建前调用,内部不能使用this
- 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`
},
}
路由懒加载
即仅在访问时初始化组件。
{path:'url',component:() => import('./views/UserDetails.vue')}
导航故障
- 等待导航结果
- 检测导航故障
- 鉴别导航故障
- aborted:导航守卫返回false被阻止
- cancelled:导航未完成之前又有新导航,如等待导航的过程中有调用了路由导航
- duplicated:已在目标位置,导航被阻止
- 检测重定向
// 使用await同步修饰符等待导航结果
const navigationResult = await router.push('/my-profile')
import { NavigationFailureType, isNavigationFailure } from 'vue-router'
if(isNavigationFailure(failure, NavigationFailureType.aborted)){
// 检测导航故障类型
}
动态路由
- createRouter 创建路由实例
- addRouter 未路由实例添加新动态路由及嵌套路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })
- removeRoute 删除路由
- 通过命名冲突覆盖方式删除旧路由
- 通过addRouter的回调方式删除
- 通过路由别名删除
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
// 删除路由
router.removeRoute('about')
- hasRoute 查看路由是否存在
- getRoute 获取路由
扩展RouterLink
<template>
<a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
<slot />
</a>
<router-link
v-else
v-bind="$props"
custom
v-slot="{ isActive, href, navigate }"
>
<a
v-bind="$attrs"
:href="href"
@click="navigate"
:class="isActive ? activeClass : inactiveClass"
>
<slot />
</a>
</router-link>
</template>
<script>
import { RouterLink } from 'vue-router'
export default {
name: 'AppLink',
inheritAttrs: false,
props: {
// 如果使用 TypeScript,请添加 @ts-ignore
...RouterLink.props,
inactiveClass: String,
},
computed: {
isExternalLink() {
return typeof this.to === 'string' && this.to.startsWith('http')
},
},
}
</script>
如果使用渲染函数或创建 computed 属性,你可以使用 Composition API 中的 useLink
import { RouterLink, useLink } from 'vue-router'
export default {
name: 'AppLink',
props: {
// 如果使用 TypeScript,请添加 @ts-ignore
...RouterLink.props,
inactiveClass: String,
},
setup(props) {
// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop
const { navigate, href, route, isActive, isExactActive } = useLink(props)
// profit!
return { isExternalLink }
},
}
<template>
<AppLink
v-bind="$attrs"
class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"
active-class="border-indigo-500 text-gray-900 focus:border-indigo-700"
inactive-class="text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300"
>
<slot />
</AppLink>
</template>