保定免费做网站,万网在线,西安软件开发培训机构,网站排名推广怎么做Vue Router是一个官方的路由管理器#xff0c;它可以让我们在Vue应用中实现单页面应用#xff08;SPA#xff09;的效果#xff0c;即通过改变URL而不刷新页面来显示不同的内容。Vue Router可以让我们定义多个路由#xff0c;每个路由对应一个组件#xff0c;当URL匹配到… Vue Router是一个官方的路由管理器它可以让我们在Vue应用中实现单页面应用SPA的效果即通过改变URL而不刷新页面来显示不同的内容。Vue Router可以让我们定义多个路由每个路由对应一个组件当URL匹配到某个路由时就会渲染对应的组件。Vue Router还提供了很多高级功能如嵌套路由、动态路由、命名路由、导航守卫、路由元信息等让我们可以更灵活地控制路由的行为和状态。 在本文中我们将介绍Vue Router的基本使用方法以及一些常用的API和技巧。我们假设你已经有了一些Vue的基础知识如果不熟悉Vue请先阅读官方文档。本文使用的Vue Router版本是4.x这是目前最新的版本它支持Vue 3.x并且有一些重要的变化和改进。如果你还在使用旧版本请参考旧版文档做好兼容处理。 公众号Code程序人生个人网站https://creatorblog.cn 安装和引入
要使用Vue Router首先需要安装它。你可以通过npm或yarn来安装
# npm
npm install vue-router# yarn
yarn add vue-router然后在你的入口文件通常是main.js中引入并创建一个路由实例
import { createApp } from vue
import { createRouter, createWebHistory } from vue-router
import App from ./App.vue// 定义路由配置每个路由映射一个组件
const routes [{ path: /, component: Home },{ path: /about, component: About },// ...其他路由
]// 创建一个路由实例使用history模式
const router createRouter({history: createWebHistory(),routes, // 等价于routes: routes
})// 创建一个Vue应用实例并挂载到#app元素上
const app createApp(App)// 将路由实例注入到应用实例中
app.use(router)// 挂载应用
app.mount(#app)这里有几点需要注意
Vue Router 4.x使用了函数式的API来创建路由实例而不是像3.x那样使用new VueRouter()构造函数。这样可以避免全局污染和依赖注入的问题。Vue Router 4.x支持三种模式history、hash和memory。其中history模式是推荐的模式它使用HTML5 History API来实现无刷新的URL切换。要使用history模式需要调用createWebHistory()函数来创建一个history对象并传递给createRouter()函数。如果你想使用hash模式或memory模式请分别调用createWebHashHistory()或createWebMemoryHistory()函数。路由配置是一个数组每个元素是一个对象表示一个路由。每个路由对象至少需要有两个属性path和component。path是一个字符串表示URL路径component是一个组件表示要渲染的内容。你可以在routes数组中定义任意多个路由对象。要将路由实例注入到应用实例中需要调用app.use(router)方法。这样就可以在应用中使用路由相关的功能了。
使用router-link和router-view
有了路由实例和配置之后我们就可以在应用中使用router-link和router-view两个组件了。router-link是一个特殊的组件它会渲染成一个a标签并且可以自动添加或移除active类名来表示当前激活的路由。router-link接受一个to属性表示要跳转的目标路径。例如
router-link to/Home/router-link
router-link to/aboutAbout/router-link这会渲染成
a href/ classrouter-link-activeHome/a
a href/aboutAbout/a当URL变化时router-link会自动更新active类名以及对应的样式。你可以通过active-class属性来自定义active类名或者通过exact属性来控制是否需要完全匹配路径。
router-view是另一个特殊的组件它会根据当前匹配的路由来渲染对应的组件。你可以把它放在任何地方通常是放在App组件的模板中作为一个占位符。例如
templatediv idapph1Vue Router Demo/h1navrouter-link to/Home/router-linkrouter-link to/aboutAbout/router-link/nav!-- 这里会渲染匹配到的组件 --router-view/router-view/div
/template当URL变化时router-view会自动更新渲染的组件以及对应的生命周期钩子。你可以通过name属性来给router-view命名以便在嵌套路由中使用。
使用动态路由和命名路由
有时候我们需要根据URL中的参数来渲染不同的组件例如用户的个人主页或者文章的详情页。这时候我们可以使用动态路由来实现。动态路由是指在path中使用冒号:来表示一个参数例如
const routes [// ...其他路由// 动态路由匹配/user/任意值{ path: /user/:id, component: User },// 动态路由匹配/post/任意值{ path: /post/:slug, component: Post },
]这样当URL为/user/123或/post/hello-world时就会匹配到对应的路由并渲染User或Post组件。在组件中我们可以通过$route.params对象来获取动态路由参数的值例如
templatediv classuserh2User {{ $route.params.id }}/h2/div
/template或者
templatediv classposth2Post {{ $route.params.slug }}/h2/div
/template当然我们也可以给动态路由参数添加一些限制例如正则表达式。这样可以避免匹配到不合法的值。例如
const routes [// ...其他路由// 动态路由只匹配/user/数字{ path: /user/:id(\\d), component: User },
]这样当URL为/user/abc时就不会匹配到该路由了。
除了使用path来定义路由我们还可以使用name来给路由命名。命名路由可以让我们在跳转或链接时更方便地引用路由而不用担心path的变化。例如
const routes [// ...其他路由// 命名路由{ path: /user/:id, name: user, component: User },
]这样在router-link中我们就可以使用name属性来指定目标路由并且通过params属性来传递动态路由参数。例如
router-link :to{ name: user, params: { id: 123 }}User 123/router-link这会渲染成
a href/user/123User 123/a同样在编程式导航中我们也可以使用name和params来跳转到目标路由。例如
// 在组件中
this.$router.push({ name: ‘user’, params: { id: 456 }})// 这会跳转到 /user/456使用命名路由的好处是我们可以在任何地方修改路由的path而不用担心影响到其他地方的引用。只要保持路由的name不变就可以保证路由的正确性。
使用嵌套路由和命名视图
有时候我们需要在一个页面中显示多个组件或者在一个组件中嵌套另一个组件。这时候我们可以使用嵌套路由和命名视图来实现。嵌套路由是指在一个路由对象中使用children属性来定义子路由例如
const routes [// ...其他路由// 嵌套路由{path: /user/:id,component: User,children: [// 当URL为/user/:id/profile时渲染UserProfile组件{ path: profile, component: UserProfile },// 当URL为/user/:id/posts时渲染UserPosts组件{ path: posts, component: UserPosts },]}
]这样当URL为/user/123/profile或/user/123/posts时就会匹配到对应的子路由并渲染User组件和UserProfile或UserPosts组件。注意子路由的path不需要加斜杠/因为它是相对于父路由的path来解析的。
要在父组件中渲染子组件我们需要在父组件的模板中使用router-view作为占位符。例如
templatediv classuserh2User {{ $route.params.id }}/h2!-- 这里会渲染子组件 --router-view/router-view/div
/template如果我们想要同时显示多个组件而不是嵌套显示我们可以使用命名视图来实现。命名视图是指给router-view添加一个name属性来区分不同的视图并且在路由配置中使用components属性来指定多个组件。例如
const routes [// ...其他路由// 命名视图{path: /dashboard,components: {default: Dashboard,sidebar: Sidebar,header: Header,}}
]这样当URL为/dashboard时就会匹配到该路由并渲染Dashboard、Sidebar和Header三个组件。注意components是一个对象它的键是router-view的name属性它的值是对应的组件。如果没有指定name属性默认为default。
要在应用中使用命名视图我们需要在模板中使用多个router-view并给它们添加name属性。例如
templatediv idapp!-- 这里会渲染Header组件 --router-view nameheader/router-viewdiv classmain!-- 这里会渲染Sidebar组件 --router-view namesidebar/router-view!-- 这里会渲染Dashboard组件 --router-view/router-view/div/div
/template当然我们也可以将嵌套路由和命名视图结合起来使用以实现更复杂的布局和导航。例如
const routes [// ...其他路由// 嵌套路由和命名视图{path: /user/:id,component: User,children: [{path: profile,components: {default: UserProfile,sidebar: UserSidebar,}},{path: posts,components: {default: UserPosts,sidebar: UserSidebar,}},]}
]这样当URL为/user/123/profile或/user/123/posts时就会匹配到对应的子路由并渲染User、UserProfile或UserPosts和UserSidebar三个组件。注意子路由的components也是一个对象它的键是router-view的name属性它的值是对应的组件。
要在父组件中使用命名视图我们也需要在模板中使用多个router-view并给它们添加name属性。例如
templatediv classuserh2User {{ $route.params.id }}/h2!-- 这里会渲染UserSidebar组件 --router-view namesidebar/router-view!-- 这里会渲染UserProfile或UserPosts组件 --router-view/router-view/div
/template使用导航守卫和路由元信息
有时候我们需要在路由跳转时进行一些控制或处理例如验证用户权限、显示加载提示、记录访问日志等。这时候我们可以使用导航守卫来实现。导航守卫是一些函数它们会在路由跳转前后被调用让我们可以拦截或修改路由的行为。Vue Router提供了三种类型的导航守卫全局守卫、路由独享守卫和组件内守卫。
全局守卫是指在路由实例上注册的守卫它们会在任何路由跳转时被调用。全局守卫有三种beforeEach、beforeResolve和afterEach。beforeEach守卫会在路由跳转前被调用我们可以在这里进行一些权限验证或数据预处理。例如
// 在创建路由实例之后
router.beforeEach((to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 检查目标路由是否需要登录if (to.meta.requiresAuth) {// 检查用户是否已经登录if (store.state.user) {// 已经登录放行next()} else {// 没有登录跳转到登录页next({ path: /login })}} else {// 不需要登录放行next()}
})这里我们使用了to.meta属性来判断目标路由是否需要登录。meta属性是一个自定义的对象我们可以在路由配置中给每个路由添加一些元信息例如
const routes [// ...其他路由// 需要登录的路由{ path: /profile, component: Profile, meta: { requiresAuth: true }},// 不需要登录的路由{ path: /login, component: Login },
]这样在beforeEach守卫中我们就可以根据meta属性来进行不同的处理。注意在beforeEach守卫中我们必须调用next函数来决定是否放行或重定向。next函数可以接受一个参数表示要跳转的目标路径或路由对象。如果不传递参数则表示放行当前的跳转。
beforeResolve守卫和beforeEach守卫类似但是会在所有异步组件被解析后才被调用。我们可以在这里进行一些最后的检查或处理。例如
// 在创建路由实例之后
router.beforeResolve((to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 显示加载提示store.commit(showLoading)// 放行next()
})afterEach守卫会在路由跳转后被调用我们可以在这里进行一些收尾工作或清理工作。例如
// 在创建路由实例之后
router.afterEach((to, from) {// to是目标路由对象from是来源路由对象// 隐藏加载提示store.commit(‘hideLoading’);// 记录访问日志store.dispatch(‘logVisit’, { to, from }) });
路由独享守卫是指在路由配置中定义的守卫它们只会在匹配到该路由时被调用。路由独享守卫有两种beforeEnter和beforeLeave。beforeEnter守卫会在进入该路由前被调用我们可以在这里进行一些特定的处理或拦截。例如
const routes [// ...其他路由// 路由独享守卫{path: /admin,component: Admin,beforeEnter: (to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 检查用户是否是管理员if (store.state.user.role admin) {// 是管理员放行next()} else {// 不是管理员跳转到首页next({ path: / })}}}
]这里我们使用了beforeEnter守卫来判断用户是否有权限访问/admin路由。注意在beforeEnter守卫中我们也必须调用next函数来决定是否放行或重定向。
beforeLeave守卫会在离开该路由前被调用我们可以在这里进行一些确认或保存工作。例如
const routes [// ...其他路由// 路由独享守卫{path: /edit/:id,component: Edit,beforeLeave: (to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 检查编辑内容是否已经保存if (this.$refs.editor.isSaved()) {// 已经保存放行next()} else {// 没有保存弹出确认框if (window.confirm(您的编辑内容尚未保存确定要离开吗)) {// 确定离开放行next()} else {// 取消离开中断跳转next(false)}}}}
]这里我们使用了beforeLeave守卫来提示用户是否要保存编辑内容。注意在beforeLeave守卫中我们也必须调用next函数来决定是否放行或中断。如果传递false作为参数则表示中断当前的跳转。
组件内守卫是指在组件选项中定义的守卫它们只会在该组件被渲染时被调用。组件内守卫有三种beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。beforeRouteEnter守卫会在渲染该组件前被调用我们可以在这里进行一些数据获取或处理。例如
templatediv classposth2{{ post.title }}/h2p{{ post.content }}/p/div
/templatescript
export default {data() {return {post: null,}},beforeRouteEnter(to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 获取文章数据fetch(/api/posts/${to.params.id}).then(res res.json()).then(data {// 将数据传递给组件实例next(vm vm.post data)})},
}
/script这里我们使用了beforeRouteEnter守卫来获取文章数据并将其传递给组件实例。注意在beforeRouteEnter守卫中我们无法访问this因为组件实例还没有被创建。所以我们需要通过next函数的回调来访问组件实例。
beforeRouteUpdate守卫会在当前路由发生变化时被调用但是该组件被复用时才会触发。我们可以在这里进行一些数据更新或处理。例如
templatediv classposth2{{ post.title }}/h2p{{ post.content }}/p/div
/templatescript
export default {data() {return {post: null,}},beforeRouteEnter(to, from, next) {// ...省略},beforeRouteUpdate(to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 获取新的文章数据fetch(/api/posts/${to.params.id}).then(res res.json()).then(data {// 更新组件实例的数据this.post data// 放行next()})},
}
/script这里我们使用了beforeRouteUpdate守卫来获取新的文章数据并更新组件实例的数据。注意在beforeRouteUpdate守卫中我们可以访问this因为组件实例已经被创建并复用。同样在beforeRouteUpdate守卫中我们也必须调用next函数来决定是否放行或重定向。
beforeRouteLeave守卫会在离开该组件时被调用我们可以在这里进行一些确认或保存工作。例如
templatediv classedith2编辑文章/h2textarea refeditor{{ post.content }}/textareabutton clicksave保存/button/div
/templatescript
export default {data() {return {post: null,saved: false,}},beforeRouteEnter(to, from, next) {// ...省略},beforeRouteLeave(to, from, next) {// to是目标路由对象from是来源路由对象next是一个函数// 检查编辑内容是否已经保存if (this.saved) {// 已经保存放行next()} else {// 没有保存弹出确认框if (window.confirm(您的编辑内容尚未保存确定要离开吗)) {// 确定离开放行next()} else {// 取消离开中断跳转next(false)}}},methods: {save() {// ...省略this.saved true}}
}
/script这里我们使用了beforeRouteLeave守卫来提示用户是否要保存编辑内容。注意在beforeRouteLeave守卫中我们也必须调用next函数来决定是否放行或中断。
使用的注意事项
在使用Vue Router时还有一些注意事项需要了解
如果你想使用HTML5 History模式你需要配置你的服务器来支持该模式。具体来说就是让服务器对于所有的请求都返回index.html文件以便让Vue Router接管路由的处理。你可以参考官方文档中的相关说明来配置你的服务器。如果你想使用hash模式你需要注意URL中的hash值可能会影响到锚点的功能。如果你想使用锚点来定位到页面中的某个元素你需要在路由配置中使用scrollBehavior属性来自定义滚动行为。你可以参考官方文档中的相关示例来实现你的需求。如果你想使用memory模式你需要注意该模式不会改变URL也不会记录历史记录。这意味着用户无法通过浏览器的前进或后退按钮来导航路由也无法通过刷新页面来保持当前状态。该模式适合一些不需要URL和历史记录的场景例如移动端应用或小程序。如果你想在组件中访问路由相关的信息或功能你可以通过this.$route和this.$router两个属性来实现。this.$route是一个只读的对象它包含了当前激活的路由的信息例如path、params、query、meta等。你可以通过this.$route来获取或监视路由的变化以便进行一些响应式的操作。
templatediv classuserh2User {{ $route.params.id }}/h2!-- 根据路由的query参数来显示不同的内容 --div v-if$route.query.activepThis user is active./p/divdiv v-elsepThis user is inactive./p/div/div
/templatethis.$router是一个可读写的对象它是路由实例的引用它包含了一些方法和属性让我们可以在组件中控制路由的跳转或状态。
templatediv classposth2{{ post.title }}/h2p{{ post.content }}/p!-- 使用router-link来跳转到上一篇或下一篇文章 --navrouter-link :to{ name: post, params: { id: prevId }}Prev/router-linkrouter-link :to{ name: post, params: { id: nextId }}Next/router-link/nav!-- 使用router.go来后退或前进 --button click$router.go(-1)Back/buttonbutton click$router.go(1)Forward/button/div
/templatescript
export default {data() {return {post: null,prevId: null,nextId: null,}},beforeRouteEnter(to, from, next) {// ...省略},beforeRouteUpdate(to, from, next) {// ...省略},methods: {// 使用router.push来跳转到编辑页edit() {this.$router.push({ name: edit, params: { id: this.post.id }})}}
}
/script总结
以上就是Vue Router的基本使用方法以及一些常用的API和技巧。Vue Router是一个非常强大和灵活的路由管理器它可以让我们在Vue应用中实现各种复杂和高效的导航功能。
