当前位置：首页 > news >正文

Vue的路由配置我们平时需要去手动配置吗？还是说默认配置就可以了

news 来源：原创 2025/6/18 11:30:39

路由配置是否需要手动配置取决于项目的具体需求和开发方式，以下是两种情况的详细说明：

手动配置路由

在大多数中大型项目中，通常需要手动配置路由。原因如下：

复杂项目结构：如果项目有多个页面、多级嵌套路由、动态路由等复杂需求，手动配置路由可以更灵活地满足这些需求。例如，一个电商网站可能有首页、商品列表页、商品详情页、购物车页、个人中心等多个页面，且个人中心下可能还有订单管理、地址管理等子页面，这种情况下就需要手动配置路由来清晰地定义页面之间的关系和跳转逻辑。

权限控制：在一些需要权限管理的应用中，不同的用户角色可能访问不同的页面或页面的不同部分。手动配置路由可以结合权限控制逻辑，根据用户的角色动态地添加或隐藏路由，从而实现精细化的权限管理。

代码复用与模块化：手动配置路由时，可以将路由配置文件单独管理，便于代码复用和模块化开发。例如，可以将不同模块的路由配置放在不同的文件中，然后在主路由配置文件中统一引入，这样可以使代码结构更加清晰，便于维护和扩展。

使用默认配置

在一些简单项目或快速开发场景中，可以使用默认配置。例如：

单页面应用（SPA）：如果项目是一个简单的单页面应用，只有一个或几个页面，且没有复杂的路由逻辑，那么可以使用 Vue Router 的默认配置。Vue Router 提供了一些默认的路由模式和配置选项，可以快速搭建基本的路由功能，满足简单的页面跳转需求。

脚手架工具生成的项目：使用 Vue CLI 等脚手架工具创建项目时，会自动生成一个基本的路由配置文件（如 router/index.js）。对于一些小型项目，直接使用这个默认配置即可，稍作修改就能满足需求。

在 Vue 中手动配置路由时，主要涉及的属性和参数可以分为几个部分：路由模式、路由规则、全局配置和导航守卫等。

路由模式

Vue Router 提供了三种路由模式，可以通过 mode 属性配置：

hash 模式：默认模式，URL 中会包含一个 #，例如
http://example.com/#/about。这种方式不会向服务器发送请求，适合大多数单页面应用。
history 模式：URL 中没有 #，例如
http://example.com/about。这种方式需要服务器支持，因为服务器需要正确处理这些路径。
abstract 模式：用于非浏览器环境（如 Node.js），通常在开发中较少使用。

路由规则

路由规则是路由配置的核心部分，定义了页面路径与组件的映射关系。主要涉及以下属性：

path：定义路由的路径，可以是字符串或正则表达式。
component 或 components：定义路径对应的组件。如果是嵌套路由，可以使用 components 配置多个组件。
name：为路由命名，方便在代码中通过名称引用路由。
children：定义嵌套路由，子路由的路径相对于父路由。
redirect：定义重定向规则，可以是一个字符串或对象。
meta：自定义元信息，可以存储一些额外的数据，例如权限信息、标题等。

全局配置

一些全局配置选项可以用来定制路由的行为：

base：定义路由的基准路径，默认是 /。如果项目部署在子路径下，需要设置这个值。例如，如果项目部署在 http://example.com/my-app/，则需要设置 base: ‘/my-app/’。
linkActiveClass 和 linkExactActiveClass：定义激活时的 CSS 类名。默认值分别是 router-link-active 和 router-link-exact-active。可以通过这些属性自定义样式。
scrollBehavior：定义路由跳转后的滚动行为，例如是否滚动到页面顶部或指定位置。

导航守卫
导航守卫用于在路由跳转前后执行一些逻辑，例如权限验证、页面加载动画等：

全局守卫：

beforeEach：全局前置守卫，在路由跳转之前执行。
beforeResolve：全局解析守卫，在路由跳转之前执行，但会在所有组件的 beforeRouteEnter 和 beforeRouteUpdate 守卫之后。
afterEach：全局后置守卫，在路由跳转完成后执行。

路由独享守卫：

beforeEnter：定义在某个路由上，仅对该路由生效。

组件内守卫：

beforeRouteEnter：在进入组件时执行，无法直接访问 this。
beforeRouteUpdate：在组件更新时执行，可以访问 this。
beforeRouteLeave：在离开组件时执行，可以访问 this。

下面是设置路由的一个小示例：

//当点击被激活时的字体颜色
<style>.active-link{color:red;font-weight: blod;}
</style>
<div id="app"><h2>Vue router example</h2><nav>//exact为判断是否为激活状态<router-link to="/" exact active-class="active-link">Home</router-link><router-link to="/about" exact active-class="active-link">About</router-link><router-link to="/contact" exact active-class="active-link">Contact</router-link></nav><router-view></router-view>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.2/vue-router.js"></script>
<script>//子组件各页面的样式const Home={template:'<div>Home page</div>'};const About={template:'<div>About page</div>'};const Contact={template:'<div>Contact page</div>'};//定义路由const routes=[{path:'/',component:Home},{path:'/about',component:About},{path:'/contact',component:Contact}];//创建路由实例并设置配置选项const router=new VueRouter({mode:'history',	//设置模式，如果是hash模式则会以#号开始，如果为history模式则为path/home模式base:'/app/',  //设置路由的基准路径，会在域名后自动加载/app/路径,如：example.com/app/homelinkActiveClass:'active-link',  // 自定义激活链接的类名scrollBehavior(to,from,savePosition){// 自定义滚动行为if(savePosition){return savePosition}else{return {x:0,y:0}}},routes:routes});//全局前置守卫router.beforeEach((to,from,next)=>{console.log('Navigation from ',from.path,'to',to.path);// 可以在这里执行一些导航守卫逻辑next();// 确保调用 next() 以继续导航});const app=new Vue({router}).$mount("#app");
</script>

mode：

设置路由模式为 history，这样 URL 不会包含 #。
如果需要使用哈希模式，可以将 mode 设置为 ‘hash’。

base：

设置路由的基准路径为 /app/。
如果你的应用部署在子路径下（例如 https://example.com/app/），需要设置 base。
linkActiveClass：
自定义激活链接的类名为 active-link。
默认情况下，Vue Router 使用 router-link-active 作为激活链接的类名。
scrollBehavior：
自定义滚动行为。
当用户从一个页面导航到另一个页面时，可以控制页面的滚动位置。
在这个示例中，如果存在保存的滚动位置，则恢复到该位置；否则滚动到页面顶部。

beforeEach：

全局前置守卫，用于在路由跳转之前执行一些逻辑。
在这个示例中，简单地打印导航路径，并调用 next() 以继续导航。

运行效果

打开页面后，页面会显示一个导航栏，包含三个链接：Home、About 和 Contact。
点击链接时，页面会根据路由规则动态加载对应的组件内容。
使用 history 模式时，URL 会直接显示路径（如 /my-app/about），而不是包含 # 的哈希模式。
激活的链接会自动添加 active-link 类。
导航时会触发全局前置守卫，打印导航路径。