Vue路由：安装、配置、基本使用

最新推荐文章于 2024-07-05 15:05:21 发布
最新推荐文章于 2024-07-05 15:05:21 发布
阅读量442 收藏 1
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43005779/article/details/106835319
版权
本文介绍了Vue-Router的路由概念，从后端路由到前端路由的演变，详细阐述了前端路由的hash模式和HTML5历史状态。同时，讲解了vue-router的安装、配置过程，包括在模块化工程中的应用，以及如何使用router进行组件间的跳转和重定向。
摘要由CSDN通过智能技术生成

Vue-Router路由中的映射关系

一、路由

路由是通过互联网把信息从源地址传输到目的地址的活动

通过映射表进行路由和转发，这个映射表表示了数据包转向哪里

1.1前端渲染、后端渲染

阶段1：后端路由，后端渲染

网页最早用的都是后端渲染，原本用的大多数都是jsp（java server page），php等

服务器直接生产生成好url对应的html页面，返回给客户端展示

一个页面有自己对应的url，url会发送到服务器，服务器通过正则对该url进行匹配，最后交给一个Controller进行处理，Controller进行各种处理后最终生成html或者数据，返回给前端，这就完成了一个IO操作

在这里插入图片描述

当有多个页面时，服务器会处理url和页面的映射关系，这样的路由是后端路由

这样的网页的模块是由后端人员来编写，前端人员如果要开发页面还要学java、php，而且html代码和数据以及对应的逻辑会混在一起，难以维护

阶段2：前后分离阶段

随着Ajax的出现，有了前后分离的开发模式，后端只负责提供API来返回数据，前端通过Ajax来获取数据，并通过JavaScript将数据渲染到页面中

最低0.47元/天 解锁文章
乔木木木木
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由·配置
weixin_64948861的博客
05-04 4007
在上述代码中，我们首先通过import引入了Vue、Vue Router和两个组件App.vue、Home.vue、About.vue。然后通过Vue.use()语句来安装Vue Router插件，接着我们用VueRouter实例来定义路由规则（路由的配置项），有两个路由/和/about，它们分别对应了两个组件：Home和About，最后通过new Vue()语句创建了Vue实例，并将VueRouter实例挂载在Vue实例上的router属性上。然后定义了两个路由/和/about，它们分别对应了两个组件。
vue路由的创建及基本使用
04-15
本文将深入讲解Vue Router的创建及基本使用，包括query和params参数的传递、实现动画效果以及使用组件模板。 1. **Vue Router 的安装与配置** 在开始使用Vue Router之前，需要先通过npm或yarn将其安装到项目中。在...
vue路由配置
m0_57108418的博客
07-07 2万+
二、配置路由 在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示在index.js文件中写入如下代码，实现创建一个路由器 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图 在main.js中注册路由 编辑student.vue路由 编辑school.vue路由 在app.vue中进行路由的使用 四、效
vue路由和路由安装
最新发布
m0_64455070的博客
07-05 960
多种导航模式：Vue路由支持不同的导航模式：hash模式（默认）和history模式。实现页面的无刷新切换：使用Vue路由可以在单个web页面中实现应用程序内的页面切换，而无需重新加载整个页面，这将更快地为用户提供请求的内容。1）理解： 一个路由（route）就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理。实现嵌套路由和视图：Vue路由使您可以将组件树映射到路由，以构建复杂的用户界面，同时保持组件和路由之间的关系。这时候代表你的路由下载成功了，我们需要引入它。
【Vue】Vue 路由的配置及使用
m0_74002634的博客
01-18 7824
Vue 路由是 Vue 中一个非常重要的概念，它允许你在应用程序中创建多个页面并在这些页面之间进行导航。在 Vue 中，路由是通过 Vue Router 实现的。本文将介绍 Vue Router 的基本概念和用法，并对路由配置与使用进行详细解析。
安装vue路由,
weixin_33973600的博客
03-01 77
1.在git命令面板输入 npm install vue-router 2.在src文件夹下创建router文件夹,该文件夹下创建index.js文件,如下图 3.该创建的文件下引用vue-router import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) ...
vue
weixin_44695219的博客
06-25 132
在vue组件页面中，集成vue-router路由模块 vue-router官网 1.安装路由 npm i vue-router -S 导入路由模块： import VueRouter from 'vue-router' ​ 安装路由模块： Vue.use(VueRouter); ​ 导入需要展示的组件: import login from './c...
vue路由传参三种基本方式详解
10-15
在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬编码。下面我们将详细探讨这三种方式及其应用场景。 ### 方案一：通过`params`传递参数 `params`是一种在...
vue路由的配置和页面切换详解
11-19
以下是对Vue路由配置和页面切换的详细解释： 1. **Vue 路由基础** Vue 路由通过监听浏览器URL的哈希（#）变化来触发页面组件的切换。主要涉及三个关键元素： - `<router-link>`：用于创建可点击的导航链接，当...
vue router 配置路由的方法
10-18
除了静态的路由配置，Vue Router 还支持动态路由参数。通过在路径中使用冒号 `:` 开头的占位符，我们可以传递变量到组件。例如： ```javascript // 路由规则 { path: '/user/:userId', component: User } // 使用 ...
配置Vue的路由
前端技术的学习整理
04-26 356
在Vue环境中，找到index.js文件中  代码如下：import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import FirstNode from '@/components/FirstNode'import introduce from '...
Vue路由安装和入门
z_leo_c的博客
05-27 129
【代码】Vue路由安装和入门。
Vue 路由配置及安装
SiaEyre
06-01 688
安装路由： 1.在cmd中 cd 到对应的vue项目，输入"npm install vue-router --save-dev" 2.安装完成以后，输入“npm 重启项目” 引入路由： 1.在main.js文件中引入路由 import VueRouter form 'vue-router' 2.使用路由：Vue.use(VueRouter) 路由配置： var router = ...
Vue的路由配置（Vue2和Vue3的路由配置）
热门推荐
weixin_46022934的博客
07-12 2万+
系列文章目录 一、路由是什么？ 二、Vue2中路由的创建步骤 1.安装正确的路由版本（这里我踩坑了） 2.vue2中配置路由的步骤 步骤如下： 代码如下图所示 如下图所示：
vue配置路由
前端攻城狮的博客
03-27 1010
1.下载 vue-router 先看看package.json有没有vue-router，没有的话下载 npm i vue-router 2.在 main.js 中引入 vue-router import VueRouter from 'vue-router' 3.调用一个方法（固定写法）：Vue.use(VueRouter) Vue.use(VueRouter) 4.HTML代码 左侧代码...
vue安装路由
weixin_44190647的博客
08-10 184
安装路由 cnpm install vue-router --save cnpm install animate.css -S cnpm install sass-loader node-sass --save cnpm i babel-plugin-import -D cnpm i vant -S cnpm install axios --save cnpm install --save vue-router vuex cnpm install axios -S cnpm install --save m
vue 路由的安装及使用
qq_42552857的博客
07-06 835
进入项目 cd 项目 安装: 　　1.cmd下输入: npm install vue-router --save //安装路由 　 使用方法一: 　　1.在mian.js下引入，使用，配置路由 　　　 　 import VueRouter from 'vue-router' 　　 Vue.use(VueRouter) 　　　　const router(定义一个名字)=new VueRouter({ 　　　　　　routes:[ 　　　　　　　　{path:"(路由)",com
Vue与路由配置实战：递归实现多功能菜单栏
"本文主要介绍如何使用Vue.js结合路由配置实现一个递归的菜单栏功能，包括一级菜单、二级菜单和三级菜单的展示。通过具体的实例代码，详细讲解了实现过程，适合学习和工作中参考。" 在前端开发中，Vue.js是一个广泛...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值