vue路由的基础知识总结，vueRouter插件的安装与使用

码喽的自我修养

已于 2024-05-29 09:01:24 修改

阅读量1k

点赞数 28

分类专栏： vue从基础到起飞文章标签： vue.js javascript 前端前端框架 html5 vue ai

于 2024-05-29 08:56:03 首次发布

本文链接：https://blog.csdn.net/2301_78542842/article/details/139275564

版权

vue从基础到起飞专栏收录该内容

32 篇文章 25 订阅

订阅专栏

本篇讲解一下vue关于路由的入门知识，以及vueRouter插件的安装与使用，对vue路由还不熟悉的小伙伴学起来吧~ 原创不易，需要的小伙伴收藏+关注 哦~

💟 上一篇文章 vue系列之插槽(Slot) 详解（热榜前十）

📝 系列专栏 vue从基础到起飞

一、单页应用程序介绍

vue之所以采用路由的方式进行页面跳转，是因为vue是单页面应用程序（SPA），在正式学习路由之前，我们有必要简单了解一下单页应用程序

1.概念

单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现

2.具体示例

单页应用网站：网易云音乐网易云音乐

多页应用网站：京东京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！

3.单页应用 VS 多页面应用

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

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

二、路由介绍

1.思考

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

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

比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的

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

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

2.路由的介绍

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

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

三、路由的基本使用

1.目标

认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用

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

3.说明

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

4.官网

Vue Router

5.VueRouter的使用（5+2）

5个固定的步骤

下载 VueRouter 模块到当前工程，版本3.6.5
```
  yarn add vue-router@3.6.5
```
main.js中引入VueRouter
```
  import VueRouter from 'vue-router'
```
安装注册
```
  Vue.use(VueRouter)
```
创建路由对象
```
  const router = new VueRouter()
```

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

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

当我们配置完以上5步之后就可以看到浏览器地址栏中的路由变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

6.代码示例

main.js

  // 路由的使用步骤 5 + 2
  // 5个基础步骤
  // 1. 下载 v3.6.5
  // yarn add vue-router@3.6.5
  // 2. 引入
  // 3. 安装注册 Vue.use(Vue插件)
  // 4. 创建路由对象
  // 5. 注入到new Vue中，建立关联
  
  
  import VueRouter from 'vue-router'
  Vue.use(VueRouter) // VueRouter插件初始化
  
  const router = new VueRouter()
  
  new Vue({
    render: h => h(App),
    router
  }).$mount('#app')

7.两个核心步骤

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

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

App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>