vue-路由（六）

news2025/1/23 9:30:53

阅读文章你可以收获什么？

1 明白什么是单页应用

2 知道vue中的路由是什么

3 知道如何使用vueRouter这个路由插件

4 知道如何如何封装路由组件

5 知道vue中的声明式导航router-link的用法

6 知道vue中的编程式导航的使用

7 知道声明式导航和编程式导航式如何传递参数的？

单页应用程序-Single Page Applicatio

什么是单页应用程序？

单页面应用(SPA): 所有功能在 一个html页面 上实现

具体示例: 网易云音乐 https://music.163.com/

单页应用程序与多页应用的对比

单页面应用：系统类网站 / 内部网站 / 文档类网站 /移动端站点

多页应用：公司官网 / 电商类网站

路由概念

为什么需要路由

单页面应用程序，之所以开发效率高，性能高，用户体验

最大的原因就是：页面按需更新

要按需更新，首先就需要明确：访问路径和组件的对应关系！

访问路径和组件的对应关系如何确定呢？路由

路由的介绍（要点概念）

生活中的路由：设备和ip的映射关系

Vue中路由：路径和组件的映射关系

如何在vue中使用路由呢？这就需要使用到一个已经封装好的组件VueRouter来实现了

VueRouter入门（路由）

VueRouter 的介绍

作用：修改地址栏路径时，切换显示匹配的组件

说明：Vue 官方的一个路由插件，是一个第三方包

官网：https://v3.router.vuejs.org/zh/

小知识：

vue2 3 3 解析：vue2使用的路由版本是3开头的，使用的vuex（数据存储仓库）也是3开头的

vue3 4 4 解析：vue3使用的路由版本是4开头的，使用的vuex也是4开头的

VueRouter 的使用 (5 + 2)

5个基础步骤 (固定)

① 下载：下载 VueRouter 模块到当前工程，版本3.6.5

npm i vue-router@3.6.5

② 引入

import VueRouter from 'vue-router'

③ 安装注册

Vue.use(VueRouter)

④ 创建路由对象

const router = new VueRouter()

⑤ 注入，将路由对象注入到new Vue实例中，建立关联

2 个核心步骤

① 创建需要的组件 (views目录)，配置路由规则

② 配置导航，配置路由出口(路径匹配的组件显示的位置)

小结：到这里就完成了路由的基本使用了，但在日常开发中我们一般都会将路由封装起来使用，这样便于管理，后面会详解讲解

1 声明一个index.js文件，里面写了导入路由的相关代码

import Vue from 'vue'
import VueRouter from "vue-router";
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
import Article from '@/views/Article'
import Like from '@/views/Like'
import User from '@/views/User'
import Collect from '@/views/Collect'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 一级路由
    {
      path: '/' ,
      component: Layout,
      redirect: '/article',
      // 二级路由
      children: [
        {path: '/article' ,component: Article},
        {path: '/like' ,component: Like},
        {path: '/user' ,component: User},
        {path: '/collect' ,component: Collect},
      ]
    },
    {path: '/detail' ,component: ArticleDetail}
  ]
})

export default router

2 将封装的路由注册到mian.js的全局的Vue中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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