Vue入门【八】-- Vue-Router路由基本使用

最新推荐文章于 2023-01-14 17:45:01 发布
最新推荐文章于 2023-01-14 17:45:01 发布
阅读量398 收藏 2
点赞数 2
分类专栏： 前端 vue 文章标签： vue.js 前端 javascript 前端框架 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48802092/article/details/127112301
版权
这篇博客介绍了Vue-Router的基本使用，包括安装方法、关键概念如route、routes和router，以及如何创建和配置路由实例。通过<router-link>进行页面跳转，并使用<router-view>呈现匹配的组件。在项目中，需要在index.js中设置和引入VueRouter，同时在App.vue中配置<router-link>和<router-view>。
摘要由CSDN通过智能技术生成

Vue-Router路由

安装

方式一 : CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

方式二:本地引入

<script src='vue.js'></script>
<script src='vue-router.js'></script>

方式三 : cnpm下载

cnpm install vue-router

注意：

在html文件中使用时需要引入vueRouter(且需要先引入vue.js,再引入vueRouter)

使用步骤：

        1.

最低0.47元/天 解锁文章
愛 / 滥 / 時
关注
专栏目录
vue框架Router(vue学习笔记)
dogeggcrazy的博客
11-29 420
Router是Vue.js 官方的路由管理器，就像你在家要上网必须要有一个路由器来输出wifi你通过wifi来上网，而Router可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；
超详细的Vue-router (路由)
qq_64750772的博客
03-05 1540
由于Vue在 开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起 来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是 SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 一、安装 如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如...
vue-router `＜router-link＞` 相关属性 vue-路由配置和使用步骤整理
Allen的博客
10-09 711
vue-router 实例 Vue.js + vue-router 可以很简单的实现单页应用。 <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。 以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示： HTML 代码 <script src="https://unpkg.com/vue/dist/vue.js"><
Vue-router路由
qq_40007317的博客
05-14 454
1、路由跳转 router-view：相当于路由网址匹配到的组件会渲染到这个标签上 （1）标签式跳转 ​ router-link：相当于a标签，给我们提供跳转到某个路由的功能，如果没有匹配到路由就会跳转失败，通过传入 to属性指定链接 （2）编程式跳转 ​ this.$router.push({path:"路由"}) //App.vue文件 <div id="app"> <router-view></router-view> <!-- 路由匹配到的组
Vue学习之路由(Router)
weixin_42592879的博客
09-23 523
Vue学习之 路由(Router) 文章目录Vue学习之 路由(Router)一、路由是什么？二、Vue Router的安装1.直接下载/CDN2.读入数据总结 一、路由是什么？ 在计算机网络原理中，路由是指路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程。可以想象为快递转运站，根据包裹的地址信息将快递送到指定地点。 在web中的路由也是类似的，route根据url的不同来跳转到相应的url页面 Vue提供了路由的组件Vue Router 二、Vue Router的安装
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
Vue.js框架入门之vue-router路由的基本使用
01-08
现在来续写第六期——Vue Router路由管理器 一、什么是路由 1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2、前端路由：对于单页面应用程序来说，主要通过URL中...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :check_mark_button: ...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
Vue-Router基础详细教程
qq_15859173的博客
11-24 428
1，router-view <router-view>是一个功能性组件，用于渲染路径匹配到的视图组件。可以配合<transition>和<keep-alive>使用。如果两个一起用，要确保在内层使用<keep-alive>。 <router-view></router-view> <!--或--> <router-view name="footer"></router-view> 如果<rou
VUE-路由详解
damadashen的博客
05-14 2906
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
在使用vue-router遇到的问题以及解决办法
curry_zhao的博客
12-03 3万+
1、ERROR in ./src/view/BootPage.vue template syntax error Component template should contain exactly one root element: .................. 解决方法：在vue-router2.0中，事件template的根节点只能有一个。 2、 [Vue warn]: Fai
一文了解Vue全家桶之Vue-router
bug处理进行时
08-03 676
一、安装 方式一： 通过JavaScript 或者 CDN引入 https://unpkg.com/vue-router/dist/vue-router.js 方式二： 模块化安装： npm install vue-router 注意：如果在模块化工程中使用vue，必须使用Vue.use()来明确的安装路由功能 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 方式三： 基于cli方式
Vue第四天学习总结—— Vue全家桶之前端路由(路由的基本概念与原理、vue-router的基本使用、嵌套路由-用法、动态路由匹配、命名路由、编程式导航)
weixin_52819925的博客
08-27 492
(一) 路由的基本概念与原理 1. 路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 在开发中，路由分为：前端路由、后端路由 后端路由是由服务器端进行实现，并完成资源的分发 （url与资源/数据的对应关系） 前端路由是依靠hash值(锚点链接)的变化进行实现 （锚点与组件之间的关系） 2. 后端路由 概念：根据不同的用户 URL
Vue-Router
最新发布
weixin_45845391的博客
01-14 1068
当定义像 :userId 这样的参数时，我们内部使用以下的正则 ([^/]+) (至少有一个字符不是斜杠 / )来从 URL 中提取参数。这很好用，除非你需要根据参数的内容来区分两个路由。想象一下，两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，所以我们需要一种方法来区分它们。const routes = [ // 匹配 /o/3549 {path : '/o/:orderId' } , // 匹配 /p/books {
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
vue-router配置
alhivlhos222178181的博客
04-10 105
首先在App.vue中 1.使用router-link组件来导航，通过‘to'属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 <router-link class="tab-item" to="/goods">商品</router-link> <router-link class="tab...
Vue-Router路由详解------路由的使用和模式
weixin_53027472的博客
10-10 596
vue-router的基本使用和两种路由模式
Vue.js入门教程：深入理解vue-router路由管理
"Vue.js框架入门系列教程，涵盖了Vue的基础语法和组件使用，以及Vue Router路由管理器的介绍。文章旨在帮助读者理解前端路由的概念，特别是在单页面应用中的作用，并通过实例展示了如何在Vue中使用vue-router进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值