VueRouter基础教程：路由原理与实战应用-CSDN博客

本文介绍了路由的基本概念，着重讲解了VueRouter的使用，包括后端和前端路由的区别，VueRouter的安装、配置、功能如动态路由、参数传递、重定向和路由守卫等，以及页面导航的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言

这张是关于路由的基础知识，先从vue-router开始，后期会补充reactRouter。

一、路由

1.后端路由

url请求地址与服务器资源之间的对应关系。

后端渲染（存在性能问题）
Ajax前端渲染（提高性能，不支持浏览器的前进和后退操作）
SPA（single page application） :单页渲染，整个网站只有一个页面，内容通过Ajax局部实现，支持浏览器的前进和后退操作。

2.前端路由

根据不同用户事件，显示不同的页面内容。

二、vue-router

1.关于路由

官网：Vue Router | Vue.js 的官方路由 (vuejs.org)
安装：npm install vue-router --save
点击页面跳转，页面刚好显示对应内容。

2.路由中的三胞胎

route：指一条路由
routes：一组路由，把route中每一个路由组合起来，形成数组。
router：相当于管理路由的机制。routes定义一组路由，请求动态需要router。

3.路由的实现及功能

3.1 实现：把路径和页面内容对应起来，然后在页面中渲染出来。

<router-link>：点击
<router-view>：显示

3.2 步骤：

引入相关库
添加路由链接（router-link）

定义路由（由两部分组成 path 和 component ）

const routes = [
      {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login.vue')
      }
]

配置并创建路由实例

const router = new VueRouter({
    routes //=》routes：routes
})

把路由挂载到Vue根实例

const app = new Vue({
    router
}).$mount($#app)

3.3 功能：

两种模式hash、history

const router = createRouter({
    //hash
    history:createHashHistory();

    //history
    history:createHistory();
    routes
})

嵌套路由:父级路由中有子级路由链接
路由参数：路径参数用冒号 : 表示

命名路由：name

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User,
  },
]

4.动态路由

路由组件通过 $route.params 获取路由参数，动态参数以 : 开头，props 接收路由参数

const User = {
  // 请确保添加一个与路由参数完全相同的 prop 名
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]

5.页面导航两种方式

声明式导航：通过点击链接实现
编程式导航：调用JavaScript形式的 API 实现

6.路由组件传参

name 传参
vuex 状态管理（$store.state）
<router-link>标签中的 to 传参

path：要跳转的路由路径，或路由文件中配置的 name 值

params：要传送的参数，可以以 key:value 形式传递

query：通过 url 来传参

$router 方式跳转

7.路由重定向

用于不同页面跳转到同一个页面情况。使用 redirect 参数，将要跳转页面路径添加到 redirect 参数后面。

8.路由守卫

在进入路由之前，拦截检查，是否放行。

vue-router 中提供三类钩子函数实现路由守卫

全局导航
路由独享
组件守卫