【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用

已于 2023-09-07 04:10:20 修改
阅读量1.5k 收藏 1
点赞数 1
分类专栏： vue 文章标签： css 前端 html vue.js javascript
于 2023-09-07 01:35:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72979483/article/details/132724122
版权

单页面应用 与 多页面应用

单页面应用（Single-Page Application，SPA）和多页面应用（Multi-Page Application，MPA）是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。

单页面应用（SPA）：指的是整个应用只有一个 HTML 页面，页面的内容和交互都通过 JavaScript 动态加载和更新。在 SPA 中，页面的切换和内容的变化通过前端路由来实现，通常使用框架（如 Vue、React、Angular）来构建。SPA 的优点是用户体验好，无需刷新整个页面即可根据用户交互动态地更新内容，提供流畅的用户界面。但对于首次加载较大的应用，会消耗较多的初始加载时间。

多页面应用（MPA）：指的是应用由多个独立的 HTML 页面组成，每个页面对应一个独立的功能或视图。在 MPA 中，每个页面都是独立的，它们通过链接或表单提交等方式进行页面跳转。在每个页面中，服务器会返回一个新的 HTML 页面，包含所需的样式和脚本。MPA 的优点是每个页面都有独立的 URL，有利于 SEO（搜索引擎优化），也更适合传统的 Web 开发方式。但页面之间的切换会导致整个页面的刷新，用户体验稍差一些。

选择SPA还是MPA主要取决于应用的需求和目标。SPA适合构建交互复杂、用户体验要求高的应用，如社交媒体应用、在线编辑器等；而MPA适合构建内容丰富、独立页面较多的应用，如电子商务网站、新闻门户等。
在这里插入图片描述

常见的网站比如网易云音乐就是单页面应用，而京东，淘宝就是一个多页面应用。

在这里插入图片描述

VueRouter路由

像vue开发的就是一个典型的单页面程序。
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。

在这里插入图片描述

如何配置VueRouter

  1. 下载vue-router因为它是一个单独的模块所以需要下载。
    vue2对应的vue-router版本是 vue-router3.x
    vue3对应的vue-router版本是 vue-router4.x
    使用npm下载：npm install vue-router@3.6.5 --save
    使用yarn下载：yarn add vue-router@3.6.5

  2. 在main.js中引入。

import VueRouter from 'vue-router'
  1. 安装注册。
Vue.use(VueRouter)
  1. 创建路由对象。
const router = new VueRouter();
  1. 将路由对象注入到Vue实列中，建立关联,键值对形式，键与值同名可简写。
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

main.js完整代码：

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

Vue.config.productionTip = false
Vue.use(VueRouter)

const router = new VueRouter();

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

配置成功启动项目浏览器顶部地址栏会出现#号
在这里插入图片描述

如何使用VueRouter

在这里插入图片描述

首先肯定是要配置路由规则。
首先准备了三个简单的页面组件。
引入页面组件，然后将他添加到router的routes属性中，path是访问路径，component是对应的组件页面{path:"/fine",component:MyFine},页面组件的名称最好超过两个单词，否则会报错，因为是vue规定的，为了有更强大的语义性。name

import Vue from 'vue'
import App from './App.vue'
import MyFine from './views/MyFine.vue'
import MyFriend from './views/MyFriend.vue'
import MyIndex from './views/MyIndex.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
//配置路由规则 path是访问路径，component是对应的组件页面
  routes:[
    {path:"/fine",component:MyFine},
    {path:"/friend",component:MyFriend},
    {path:"/index",component:MyIndex},
  ]
});
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

路由的路径跳转，与容器 <router-view></router-view>

<template>
  <div id="app">
    <div class="menu-box">
      <ul class="menu">
        <!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 -->
        <li><a href="#/index">首页</a></li>
        <li><a href="#/fine">发现</a></li>
        <li><a href="#/friend">朋友</a></li>
      </ul>
    </div>
    <div >
      <!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu-box{
  width: 100%;
  height: 50px;
}
.menu{
  height: 100%;
  text-align: center;
  line-height: 50px;
}
.menu>li{
  float: left;
  width: 33%;
  list-style: none;
  background: skyblue;
}

</style>

效果点击上面的menu菜单下面的内容也会随之改变：
在这里插入图片描述

提取路由代码，封装路由模块

像上面这样配置路由会有一点问题，就是不易于维护，因为把所有的配置全部都写在main.js里面，那我们后面维护看见main.js文件里面的一堆代码，头都晕了，所以这里我们将它提取出来，再通过import导入到main,js。

  1. 首先建立路由模块文件
    在这里插入图片描述
  2. 将main.js里面配置路由的代码赋值到index.js。导入文件的路径需要修改，@:代表从src文件出发寻找文件。
import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
      {path:"/fine",component:MyFine},
      {path:"/friend",component:MyFriend},
      {path:"/index",component:MyIndex},
    ]
  });

export default router;
  1. 再main.js里面导入路由模块直接使用。
import Vue from 'vue'
import App from './App.vue'
//导入路由模块
import router from './router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //直接使用
  router
}).$mount('#app')
使用给menu菜单选中的高亮样式
  1. router-link是什么?
    vue-router提供的全局组件，用于替换 a 标签
  2. router-link怎么用?
<router-link to="/路径值"></router-link>

再使用 <router-link to="/index">首页</router-link>时to属性里面的路径就可以不用加#号了
必须传入to属性,指定路由路径值

  1. router-link好处?
    能跳转，能高亮(自带激活时的类名）router-link-active 和 router-link-exact-active我们需要高亮效果可以直接再style样式中为这个类名添加高亮的样式了。

修改刚才的代码为：

<template>
  <div id="app">
    <div class="menu-box">
      <ul class="menu">
        <!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/fine">发现</router-link>
        <router-link to="/friend">朋友</router-link>
      </ul>
    </div>
    <div >
      <!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.menu-box{
  width: 100%;
  height: 50px;
}
.menu{
  height: 100%;
  text-align: center;
  line-height: 50px;
}
.menu>a{
  float: left;
  width: 33%;
  display: block;
  list-style: none;
  background: skyblue;
}
//为激活时的这个类名添加高亮属性样式
.menu>a.router-link-active{ 
  background: rgb(12, 155, 211);
}
</style>

效果：
在这里插入图片描述

router-link-active 和 router-link-exact-active的意义

在这里插入图片描述
这里可以看见我选中的标签上面时加了两个类的，这两个类的意义是什么呢？
router-link-active ：模糊匹配
router-link-exact-active：精确匹配
模糊匹配就是地址栏上面有子目录，也可以匹配上。

而精确匹配就是地址栏和router-link的to属性路径必须时一模一样，才可以匹配上。
在这里插入图片描述

如现在时两个条件都满足，模糊和精确条件都满足，所以选中的menu里面类就是两个：
在这里插入图片描述
如现在就是不满足精确条件了，所以选中的menu里面类就是一个router-link-active ：
在这里插入图片描述

自定义高亮类名

在这里插入图片描述
在路由模块中修改：

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const router = new VueRouter({
    routes:[
      {path:"/fine",component:MyFine},
      {path:"/friend",component:MyFriend},
      {path:"/index",component:MyIndex},
    ],
    //模糊匹配的类名
    linkActiveClass:"active",
    //精确匹配的类名
    linkExactActiveClass:"exact-active"
  });
export default router;

这样添加的就是自定义的类名了，如图：
在这里插入图片描述

一个大不溜w
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-router 命名路由和命名视图
01-21
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字，根据名字进行匹配 给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。 二、代码展示： 目录视图 1、命名路由   2、命名视图 index.js import Vue from 'vue' import Router from 'vue-router' import Goodlists from '@/Goodlists/goods' import Title from '@/Goodlists/ti
Vue2的router-view中子组件与父组件传值
yuxuan89814的专栏
05-21 3964
子组件与父组件传值是通过在子组件中，定义$emit，向父组件发射一个事件，及带上传的值。父组件监听这个事件，然后调用这个事件的函数，传值是传到这个函数参数中的。 this.$emit('changeActiveStep',3); 事件名：changeActiveStep 传值：3 具体如下： 场景是，app.vue中定义一个展示当前进度的变量， 这个值随着app.vue 中router-view跳转到component1，值表示为第一步,跳转到component2，值表示为第二步 实现为： 1，在
vue版本和vue-router的匹配关系
最新发布
m0_62744746的博客
03-20 349
【代码】vue版本和vue-router的匹配关系。
vue-router.js 3.0.1 版本
04-17
vue-router 3.0.1 版本 , 2018-04-05 最新版本 .
Vue-路由配置和使用步骤整理
weixin_34087307的博客
11-23 1184
介绍 路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》 安装 本地环境安装路由插件vue-router： cnpm install vue-router --save-dev *没有安装淘宝镜像的可以将 cnpm 替换成 npm 想要安装的可以看这篇文章http://www.cnblogs.com/paddi...
vue路由配置和使用
qq_28395503的博客
07-15 303
vue路由配置和使用安装路由文件配置入口文件配置 src/main.jsApp.vue路由地址跳转切换 安装 本地环境安装路由插件vue-router： cnpm install vue-router --save-dev 路由文件配置 路由文件：src/router/index.js中的 import Vue from 'vue' //前提条件引入vue文件① import Router...
Vue路由配置和使用
sanbeisuk的博客
09-29 618
Vue路由配置和使用 项目中引入路由模块 yarn安装vue-router插件 yarn add vue-router 在项目目录中新建’route’文件夹，新建index.js和routes.js routes文件用于建立建立路由表，方便管理 //引入需要的路由文件,页面都存放在view文件夹中 import Father from '../../view/father.vue...
【Vue】Vue 路由的配置及使用
m0_74002634的博客
01-18 4027
Vue 路由是 Vue 中一个非常重要的概念，它允许你在应用程序中创建多个页面并在这些页面之间进行导航。在 Vue 中，路由是通过 Vue Router 实现的。本文将介绍 Vue Router 的基本概念和用法，并对路由配置与使用进行详细解析。
Vue源码解读之vue-router路由
01-08
看过前章vuex状态管理的分享之后，相信对路由这块也是非常感兴趣的，同样的模式，同样的方式，我们走进GitHub之vue-router 同样直接走进 src components：route-link 组件 和 router-view 组件 实现 history：关于...
VueJs路由跳转——vue-router的使用详解
11-26
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。 安装 基于传统，我更喜欢采用npm包的形式进行安装。 npm install vue-router --save 当然，官方采用了多种方式进行...
uniapp中的一个完全相似Vue-router的路由插件
01-20
本人小白，干这一行时间还短，出现什么问题望大佬指正。 这篇文章是结合文档然后...第二种 插件市场（使用HBuilderX导入插件） 第三种 ZIP下载 解压 2.项目中引入 import Vue from 'vue' import {RouterMount} from 'un
Vue路由管理器Vue-router的使用方法详解
11-21
router-link <router> 组件支持用户在具有路由功能的应用中点击导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素...
vue2配置vue-router
qq_45747117的博客
04-19 1626
首先我们需要通过npm安装依赖，npm install --legacy-peer-deps vue-router@3.5.2 需要添加版本号，不然会下载最新的vue-router，导致安装失败。 1、引入vue-router 在main.js中引入并使用 // 引入路由 import VueRouter from 'vue-router' //router是在src路径下新建的文件夹（后面会提到） import router from './router' Vue.use(VueRouter)
Vue路由: Vue-router基本配置与使用
HuaJian_Y的博客
10-13 9192
国庆连载（3） Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌. 1. Vue路由的安装和配置 1.1 安装vue路由 npm install vue-router --save-dev 2.2 配置vue路由 // 1. 导入路由并使用 import Vue from 'vue' // 导入vuerouter import VueRouter from 'vue-router'; // 使用功能VueR.
VUE 路由安装配置和使用
地瓜哥哥的博客
11-08 391
最近有初学者小白朋友要学习vue，安排一个路由配置 安装好vue cli 一般都会有路由 不是cli的就直接装 npm install vue-router --save 看看有没有router文件夹，没有自己创建，并创建一个index.js index.js内导入路由对象和vue,并调用vue.use import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 然后创建个数组，加入配置你的路由 const
vue-router配置与使用
lplovewjm的博客
05-29 352
vue中vue-router配置使用
关于router-link和router-view
hurley11的博客
11-24 6586
router-link和router-view在同一个vue文件（A.vue）里面，router-link设置路由跳转，router-view根据路由显示组件 在同一个页面中，A.vue组件是全局的页面，B.vue组件和C.vue组件是A页面中的一部分 1，router-link设置路由跳转 <router-link :to="'/url/'"> <li> <a>goto</a> </li> </.
vue-router配置及使用
hrj199036的博客
12-21 1284
vue-router配置及使用
router-link 和 router-view 的 关系
mantou_riji的博客
07-20 749
组件用于创建导航链接，当用户点击链接时，会切换到to属性对应路径的组件，并显示在。组件用于显示当前路由对应的组件内容。
vue3的router-view和router-link
08-19
Vue 3的router-view和router-link是Vue Router提供的两个核心组件，用于实现路由导航和视图渲染的功能。 router-link是一个用于生成链接的组件，它会自动根据路由配置生成对应的链接，并在用户点击时触发路由跳转。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值