Vue.js 什么是 Vue Router

Vue.js 什么是 Vue Router

Vue Router 是 Vue.js 的官方路由管理器，专为构建单页应用（SPA）而设计。它与 Vue.js 核心深度集成，使开辟者可以或许轻松地在应用中管理和导航差别的视图。
Vue Router 的功能

• 嵌套路由映射：支持在路由配置中嵌套子路由，方便构建复杂的界面结构。
  
• 动态路由匹配：允许在路由路径中使用参数，从而匹配多个路由。
  
• 模块化、基于组件的路由配置：每个路由都映射到一个组件，清晰直观。
  
• 路由参数、查询、通配符：支持多种方式传递参数，满足差别的需求。
  
• 过渡效果：与 Vue.js 的过渡体系集成，为路由视图切换提供过渡效果。
  
• 导航保卫：提供钩子函数，在路由进入或离开时实行特定逻辑。
  
• 主动激活的 CSS 类名：为当前激活的路由添加特定的 CSS 类，方便样式定制。
  
• 多种历史记录模式：支持 HTML5 history 模式或 hash 模式，灵活选择。
  
• 可定制的滚动行为：在路由切换时控制页面的滚动行为。
  
• 正确的 URL 编码：确保应用中的 URL 编码符合尺度。
  

Vue Router 的基本使用

• 安装 Vue Router：
  
  1. npm install vue-router

  复制代码
• 定义路由：
  
  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import Home from './components/Home.vue'
  3. import About from './components/About.vue'
  5. const routes = [
  6.   { path: '/', component: Home },
  7.   { path: '/about', component: About },
  8. ]
  10. const router = createRouter({
  11.   history: createWebHistory(),
  12.   routes,
  13. })
  15. export default router

  复制代码
• 在 Vue 应用中使用路由器：
  
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  5. const app = createApp(App)
  6. app.use(router)
  7. app.mount('#app')

  复制代码
• 在模板中使用 RouterLink 和 RouterView：
  
  1. <template>
  2.   <div>
  3.     <nav>
  4.       <RouterLink to="/">Home</RouterLink>
  5.       <RouterLink to="/about">About</RouterLink>
  6.     </nav>
  7.     <RouterView />
  8.   </div>
  9. </template>

  复制代码

总结

通过使用 Vue Router，开辟者可以轻松地管理应用中的路由，构建复杂的单页应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。