【vuejs】vue-router 之 addRoute 动态路由的应用总结

最新推荐文章于 2025-06-20 14:27:20 发布

生活、追梦者

最新推荐文章于 2025-06-20 14:27:20 发布

阅读量7.4k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： vue vue3全家桶文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45046532/article/details/140119108

1. Vue Router 概述

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。它与 Vue.js 深度集成，让开发者能够轻松地构建具有复杂用户界面的单页面应用。Vue Router 允许你定义不同的路由，并通过 router-view 组件在应用中显示匹配的组件。

Vue Router 的核心特性包括：

嵌套路由，允许你创建模块化的、嵌套的视图。
动态路由，可以基于参数动态生成路由。
路由参数、查询和通配符，提供灵活的路由定义。
视图之间的过渡效果，利用 Vue 的过渡系统。
导航守卫，可以在路由跳转前后执行逻辑。
带有自动激活的 CSS class 的链接
支持 HTML5 History 模式和 Hash 模式，在 IE9 中自动降级。
自定义的滚动条行为

Vue Router 的安装和基本使用步骤如下：

1.1 安装 Vue Router

对于 Vue 2，推荐使用 Vue Router 3.x 版本。可以通过 npm 或 yarn 进行安装：

npm install vue-router@3
# 或者
yarn add vue-router@3

1.2 项目中引入 Vue Router

在项目的入口文件（如 main.js 或 main.ts）中引入并使用 Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router'; // 引入路由配置

Vue.use(VueRouter);

const router = new VueRouter({
   
   
  mode: 'history',
  routes // 定义的路由数组
});

new Vue({
   
   
  router,
  render: h => h(App)
}).$mount('#app');

1.3 定义路由

在路由配置文件（如 router/index.js）中定义应用的路由：

const routes = [
  {
   
   
    path: '/',
    component: Home
  },
  {
   
   
    path: '/about',
    component: About
  }
];

export default routes;

1.4 使用 router-view 和 router-link

在应用的组件中使用 router-view 来显示当前路由匹配的组件，使用 router-link 来创建导航链接：

<template>
  <div id="app">
    <router-link to="/" exact>Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div