vue-router &&SPA（单页面应用）

最新推荐文章于 2022-12-04 16:21:16 发布

书院二层楼

最新推荐文章于 2022-12-04 16:21:16 发布

阅读量273

点赞数

分类专栏： Vue 文章标签： SPA-单页面应用 vue-router Vue

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108942998

版权

Vue 专栏收录该内容

62 篇文章 3 订阅

订阅专栏

本文介绍了如何使用Vue.js和VueRouter构建单页Web应用（SPA）。VueRouter是Vue.js的官方路由管理器，它使得组件化路由变得简单，支持嵌套路由、动态路由匹配、异步加载组件等功能，提供了平滑的页面过渡效果和基于Vue.js的导航控制。通过设置路由映射，可以轻松管理应用的不同视图。

摘要由CSDN通过智能技术生成

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)
/*
  SPA:单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新
  该页面的Web应用程序，即更新视图而不重新请求页面。带给用户更好的体验。
  
  vue-router：Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。它的本质就是建立起url和页面之间的映射关系；
  将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们.包含的功能有：
  嵌套的路由/视图表
  模块化的、基于组件的路由配置
  路由参数、查询、通配符
  基于 Vue.js 过渡系统的视图过渡效果
  细粒度的导航控制
  带有自动激活的 CSS class 的链接
  HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  自定义的滚动条行为
*/

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router