没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
内容概要:本文介绍了Vue Router的基本概念、核心功能及其高级用法。内容包含了路由配置、导航守卫、动态路由、命名视图等一系列重要主题。通过详细示例,指导开发者如何在Vue应用中优雅地管理路由,实现高性能且友好的用户交互体验。 适合人群:具备Vue.js基础知识的研发人员。 使用场景及目标:适用于希望在Vue项目中掌握高级路由功能,实现高效应用架构划分的技术团队成员及个人。 其他说明:文中涵盖了多种常见的配置与编程技巧,并针对可能出现的问题给出解决方案。
资源推荐
资源详情
资源评论
目录
基本使用
路由匹配
路由嵌套和命名
编程式导航
命名视图
重定向和别名
路由组件传参
不同的历史模式
导航守卫
路由元信息和数据获取
Vue Router和组合式API
RouterView插槽
过渡效果和滚动行为
路由懒加载
扩展RouterLink
动态路由
导航故障
基本使用
App.vue
<template>
<h1>Hello App!</h1>
<p>
<strong>Current route path:</strong> {{ $route.fullPath }}
</p>
<nav>
<RouterLink to="/">Go to Home</RouterLink>
<RouterLink to="/about">Go to About</RouterLink>
</nav>
<main>
<RouterView />
</main>
</template>
创建路由器实例
在
src/router/index.js
文件中,我们创建一个路由器实例,并定义一些路由规则:
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
这里我们定义了两个路由:
Home
和
About
。每个路由对象都包含一个
path
字段,用于匹配 URL;一个
name
字
段,用于标识路由;以及一个
component
字段,用于指定与路由关联的组件。
注册路由器插件
接下来,在主应用文件(通常是
main.js
或
main.ts
)中,我们需要将路由器注册为全局插件:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
访问路由器和当前路由
在任何组件中,你可以通过
this.$router
和
this.$route
来访问路由器实例和当前路由的信息:
export default {
methods: {
navigateToAbout() {
this.$router.push('/about');
},
},
created() {
console.log(this.$route);
},
};
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const search = computed({
get() {
return route.query.search ?? ''
},
set(search) {
router.replace({ query: { search } })
}
})
</script>
路由匹配
Vue Router 提供了灵活的路由匹配机制,包括静态路由和动态路由。动态路由允许你在 URL 中使用参数,这样你就可
以重用同一个组件来处理不同数据的情况。
动态路由匹配
定义动态路由
动态路由在 Vue Router 中通过在路径中使用冒号
(:)
开头的参数来定义。例如,如果你想为不同的用户显示个人资
料页面,可以定义如下路由:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: UserProfileComponent }
]
});
在这个例子中,
:id
是一个动态参数,可以匹配任何字符串。当用户访问
/user/123
或
/user/john
时,
UserProfileComponent
将会被渲染,并且
id
参数将分别被设置为
123
或
john
。
访问路由参数
在组件中,你可以通过
this.$route.params
访问动态参数。例如:
export default {
computed: {
userId() {
return this.$route.params.id;
}
}
}
在模板中使用参数
你也可以直接在模板中使用参数:
<template>
<div>
<h1>User Profile: {{ $route.params.id }}</h1>
</div>
</template>
路由的匹配语法
自定义正则表达式
Vue Router 允许你为动态参数定义自定义的正则表达式,这样可以限制参数的格式。例如,如果你想确保
:id
只能是
数字:
const router = new VueRouter({
routes: [
{
path: '/user/:id(\\d+)', // 正则表达式
component: UserProfileComponent
}
]
});
多个动态参数
你可以在同一个路径中定义多个动态参数:
const router = new VueRouter({
routes: [
{ path: '/user/:id/post/:postId', component: PostComponent }
]
});
在组件中,你可以像这样访问参数:
export default {
computed: {
userId() {
return this.$route.params.id;
},
postId() {
return this.$route.params.postId;
}
}
}
使用 props 传递参数
你还可以选择将动态参数作为
props
直接传递给组件,这使得组件可以像普通组件一样接收参数:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: UserProfileComponent, props: true }
]
});
此时,你不需要再通过
$route.params
访问参数,而是可以直接在组件中定义
props
:
export default {
props: ['id'],
computed: {
userId() {
return this.id;
}
}
}
代码示例
现在让我们通过一个完整的示例来展示上述概念:
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import UserProfileComponent from '../components/UserProfileComponent.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/user/:id(\\d+)',
component: UserProfileComponent,
props: true
}
]
});
export default router;
剩余35页未读,继续阅读
资源评论
天涯学馆
- 粉丝: 2156
- 资源: 436
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功