Vue-router:我不想使用所有的路由来动态创建<router-link>的循环 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vue笔记(10) vue-router

这种方法就类似于一个栈结构,最后push进去的URL会在栈顶,然后history.back()的时候就会出栈,也就会返回到我们上一个push进去的URL中

01

Vue Router——路由

SPA指的是一个web网站只有一个唯一的HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。

02

您找到你想要的搜索结果了吗？

是的

没有找到

45. Vue路由vue-router的基本使用

vue-router官方文档：https://router.vuejs.org/zh/

02

Vue3学习笔记（五）——路由，Router

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

03

17. vue-route详细介绍

说道路由，我们最熟悉的路由是什么呢？那就是路由器了。其实路由器有两个重要的功能：路由和传送

02

Vue-Router

路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科

01

Vue简介（二）

Vue的核心概念之一是组件化开发。通过将用户界面划分为一系列的组件，可以提高代码的可维护性和可复用性。Vue组件是独立的、可嵌套的，并可以拥有自己的状态和行为。

02

Vue3中的路由功能：安装和配置Vue Router、路由的基本用法、动态路由、嵌套路由

Vue3是一款流行的JavaScript框架，它提供了许多强大的功能来简化前端开发。其中一个重要的特性就是路由管理。在Vue3中，我们可以使用Vue Router库来实现路由功能。本文将详细介绍Vue3中的路由功能，包括安装和配置Vue Router、路由的基本用法、动态路由、嵌套路由等方面。

04

vue-router 的基本使用

vue-router 官方文档: https://router.vuejs.org/zh

01

vue学习笔记router传参

这是刚入门vue的第五天，刷视频整整刷了100多p，过程是艰辛的。但收获了很多东西，

00

2020前端技术面试必备Vue:(二)Router篇

前两章陆续已经更新了Vue的基础入门篇文章和Vue组件篇文章，本章将更新Vue Router 篇，前两篇掌握差不多了，你可以开发单页面应用，所有数据都在一页呈现出来，不能跳转，体验很差。学习了本篇文章后，你可以实现一个精美的Web应用了，本章将会介绍到路由的跳转实现，路由的动态传递参数，路由的守卫.......

04

vue-router详解——小白速会

一、概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由中有三个基本的概念 route, routes, router。 1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容

07

Vue学习-Vue router

在配置Vue-router时有两种模式，分别为：hash模式（默认）、history模式。

02

Vue-router 学习笔记

在以前，前后端是不分离的，这个阶段通常是由服务端渲染好页面（SSR），再发送页面给前端去展示；接着到了前后端分离的阶段，前端向静态资源服务器拿资源，再通过 js 渲染页面，此时仍然是一个 url 对应一份 html+css+js。再后来出现了 SPA 单页面应用的概念，实际上它只有一个页面，但给我们的体验是多页面之间的切换。

02

Vue 全家桶学习笔记：Vue-router

在以前，前后端是不分离的，这个阶段通常是由服务端渲染好页面（SSR），再发送页面给前端去展示；接着到了前后端分离的阶段，前端向静态资源服务器拿资源，再通过 js 渲染页面，此时仍然是一个 url 对应一份 html+css+js。再后来出现了 SPA 单页面应用的概念，实际上它只有一个页面，但给我们的体验是多页面之间的切换。

03

vue-router 4 你真的熟练吗？

虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的。

02

6.vue-router之命名路由和命名视图

① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：

01

深入探索 Vue 路由

SPA 非常好，因为它们不需要在每次更改路由时都去加载页面。这就意味着一旦加载了全部内容，就可以真正快速地对视图进行切换，并提供出色的用户体验。

03

vue-router详解[通俗易懂]

要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题

02

【面试需要-Vue全家桶】一文带你看透Vue前端路由

掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

02

vue-router基本使用

路由，其实就是指向的意思，当我点击页面上的home 按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射。所以在页面显示中，有两个部分，一个是需要点击的部分，一个是点击之后，显示点击内容的部分。　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么才能显示home的内容。这就要在js 文件中配置路由。　　路由中有三个基本的概念

02

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语，就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。

02

vue-router 详解

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

02

vue（17）vue-route路由管理的安装与配置

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

02

vue之vue-router实例

本文转自: https://www.cnblogs.com/SamWeb/p/6610733.html

02

我所知道的 vue-router

vue-router : 简称路由，简单说就是根据不同的 url 地址，显示不同的效果

02

Vue前端路由

答：1）、路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 2）、在开发中，路由分为，后端路由和前端路由。 3）、后端路由，根据不同的用户URL请求，返回不同的内容。后端路由的本质就是URL请求地址与服务器资源之间的对应关系。后端路由根据不同的URL地址分发不同的资源。 4）、前端路由，根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。

01

vue路由vue-router

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

00

Vue Router详细教程

1.什么是路由 1.1路由简介说起路由你想起了什么？路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。 --- 维基百科额，啥玩意?

03

07Vue.js快速入门-Vue路由详解

对于前端来说，其实浏览器配合超级连接就很好的实现了路由功能。但是对于单页面应用来说，浏览器和超级连接的跳转方式已经不能适用，所以各大框架纷纷给出了单页面应用的解决路由跳转的方案。 Vue框架的兼

05

use vue vuex vue-router, not use webpack

vue,vuex,vue-router放在一起能做什么？不用webpack之类的打包工具使用他们是否可行？各位道友在初学vue时是否有这样的困惑。因为现代构建前端项目的一般模式是：安装webapck，某种是glup,grunt，或者是fis等构建工具然后安装一个包管理器，npm，bower，或者说是新一代：yarn 再然后用包管理器安装各种各样的包，如：vue，bootstrap，vuex等。其后用es6的import或者是node的require引入包最后通过构建工具打包或发布项

08

起步 - vue-router路由与页面间导航

vue-router（路由）详细教程

如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由（详细见vue-cli 脚手架），如果选择y，后面下载依赖会自动下载vue-router。这里还是说一下安装：npm install vue-router

03

起步 - vue-router路由与页面间导航

我们知道路由定义了一系列访问的地址规则，路由引擎根据这些规则匹配找到对应的处理页面，然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的，而前端路由是不存在"请求"一说的。

00

VUE-路由vue-router

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js：

02

Vue Router

路由的实质是一种对应关系，url 与资源之间的对应关系就是路由。路由分为前端路由和后端路由，后端路由是由服务器完成转发，前端路由是 hash(锚点) 的变化实现的。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： ♞ 嵌套的路由/视图表 ♞ 模块化的、基于组件的路由配置 ♞ 路由参数、查询、通配符 ♞ 基于 Vue.js 过渡系统的视图过渡效果 ♞ 细粒度的导航控制 ♞ 带有自动激活的 CSS class 的链接 ♞ HTML5 历史模式或 hash 模式，在 IE9 中自动降级 ♞ 自定义的滚动条行为

03

通过 Laravel 创建一个 Vue 单页面应用（一）

使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中，我们将学习如何构建并运行一个以 Vue 路由为前端，laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上，然后在后续的教程中，我们再演示如何将 Laravel 作为 API 层而构建一个完整的应用。

02

vue-router源码分析

这是一篇集合了从如何查看 vue-router源码（v3.1.3），到 vue-router源码解析，以及扩展了相关涉及的知识点，科普了完整的导航解析流程图，一时读不完，建议收藏。

03

一步一步学Vue（五）

本篇是是vue路由的开篇，会以一个简单的demo对vue-router进行一个介绍，主要覆盖以下几个常用场景：

01

Vue路由vue-router

Vue Router 是 Vue.js 官方的路由管理器 github: https://github.com/vuejs/vue-router 中文官方网站https://router.vuejs.org/zh/ 安装vue-router

06

【vue】12.0 vue路由：vue-router

Vue Router官网： https://router.vuejs.org/zh/installation.html

04

vue嵌套路由

在实际项目中，多个前端页面由于需求而通常由多层嵌套的组件组合而成,尤其是多导航界面。此时，路由嵌套(vue-router)的优点则表现了出来。嵌套路由就是在一个被路由过来的页面下，可以继续使用路由来加载新的组件。所谓嵌套，也可以理解成父子路由。

02

vue-router 如何实现支持外部链接

vue项目中不少场景会遇到外部链接的情况 vue-router官方提供了扩展RouterLink 的方式封装成一个组件 AppLink.vue. 但是这种扩展方案存在以下问题

01

Vue2（四）动态组件插槽路由

当<component>展示的组件A被隐藏，而要展示组件B时，通常会直接销毁组件A。下次展示组件A时，再重新创建。在组件A和B要频繁切换的情况，会造成一定的损耗。

03

Vue教程(路由router-基本使用)

我们需要引入vue-router.js文件，而且必须是在vue.js文件之后引入

03

vue2路由

配置路由规则，url和对应的页面的配置const routes = [{ path: "/", compontent: "组件" }]

04

Vue-router(路由)

2.定义(注册)路由跳转的组件----使用全局扩展的方式,用其他创建组件的方式也可以在这里,进行了一个赋值操作,用一个变量名保存组件中所有的内容

02

VUE 路由入门

安装指令完成后，就可以在 node_modules 包下找到 vue-router 依赖。

01

16.动态路由传值和get传值

1.动态路由传值 1.在components目录下新建vContent.vue组件 <template>

{{msg}}

</template> <script> export default { data () { return { msg:'详情组件', } }, methods:{ }, mounted(){ console.log(this

02

vue全家桶之vue-router

vue-router默认是通过哈希路由的方式实现的。这是一种比较low的方式。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。使用后对搜索引擎比较友好，好看。缺点是后端要nginx配置。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭