项目实战-爬坑系列vue-cli3.x中路由的使用（八）

最新推荐文章于 2024-02-07 13:51:25 发布
原创 最新推荐文章于 2024-02-07 13:51:25 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了vue-router在vue-cli2.x中的使用方法。因vue-router在vue-cli2.x和vue-cli3.x中使用相同，故以vue-cli2.x为例。需先在安装vue-cli时安装vue-router，接着在main.js和router文件夹的index.js中引入，之后即可使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天说一下路由的使用方法，因为vue-router的使用无论是在vue-cli2.x和vue-cli3.x中的是一样的，所以我在这里用的是vue-cli2.x的版本。

1、我的vue-router是在安装vue-cli中安装的，如果没有安装你需要先安装一下vue-router（建议还是在vue-cli中直接去选择安装vue-router）

npm install vue-router

在这里插入图片描述
2、然后在main.js引入vue-rouetr
在这里插入图片描述
3、然后在router文件夹中index.js也得引入vue-router
在这里插入图片描述
3.然后就可以使用了
在这里插入图片描述
补充一下：
在这里插入图片描述
在这里插入图片描述

Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、
qq_43456781的博客
10-11 1073
Vue Router 官方文档（一）起步、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（router-view）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode: ‘history’） 文章目录Vue Router 官方文档（一）==起步==、动态路由匹配、嵌套路由、编程式的导航（history）、命名路由、命名视图（`router-view`）、重定向和别名、路由组件传参（prop解耦）、HTML5 History 模式（ mode:
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
vue3.x 中的路由基本配置
Sheng6666的博客
12-15 1150
1.安装路由模块 npm install vue-router@next --save 2.新建home.vue /news.vue/user.vue等组件 3.新建routes.ts文件，引入组件配置文件并将其暴露出去 4.在main.ts中引入并挂载路由 5.在app.vue中使用router-view动态挂载路由 6.使用npm run serve运行代码，在浏览器中手动输入不同地址动态挂载不同的组件 7.在app.vue中路由跳转 ...
vue 3.x路由的创建
cldyxiong的博客
06-26 179
import Vue from 'vue' //1. 导入Vue2的构造函数 import VueRouter from 'vue-touter' //导入3.x路由的构造函数 import Home from '@/components/Home.vue' // 3.导入需要路由切换的组件 Vue.use(VueRouter) //4.调用Vue.use() 函数 ，把路由配置为Vue的插件 const router = new VueRouter ({ routes
Vue-VueRouter(3.x)
qq_57404736的博客
02-07 1083
vue-vueRouter讲解演示
vue-router 3.x教程
你怎么也喜欢嘴巴嘟嘟
04-11 830
History History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。 方法 History接口不继承任何方法。 History.back() 在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 history.go(-1). Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。 History.forward() 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价
vue开发教程&案例&相关项目举例说明概要知识点总结.docx
最新发布
06-14
这个案例涵盖了 Vue.js 中路由管理、状态管理和组件通信等方面的知识。 #### 相关项目介绍 1. **Vue CLI**：一个标准的工具链，用于快速搭建 Vue.js 项目结构，简化了开发流程。 - **特点**：支持自动化脚手架...
Vue实战之axios基本使用
9.冄2.7.號的博客
07-29 2048
1、Axios 基本使用 2、Vue 生命周期 3、Vue 中组件（component） 4、Vue 中路由（Vue Router） 5、Vue CLI 脚手架 6、在脚手架中使用 axios
【响应式布局】：Vue CLI3与px2rem实战应用，打造完美移动端适配
![【响应式布局】：Vue ...本文首先强调了响应式布局与移动端适配在现代Web开发中的重要性，随后详细介绍了如何使用Vue CLI3进行项目的基础配置，包括环境安装、项目结构调整及路由与状态管理设置。文章还探讨了px2rem
Vue实战之入门基础
9.冄2.7.號的博客
07-28 615
vue实战 1、Vue 引言 渐进式 JavaScript 框架 --摘自官网 2、Vue 入门 3、v-text 和 v-html 4、Vue 中事件绑定（v-on） 5、v-show v-if v-bind 6、v-for 的使用 7、v-model 双向绑定 8、事件修饰符 9、按键修饰符 10、Axios 基本使用 11、Vue 生命周期 12、Vue 中组件（component） 13、Vue 中路由（Vue Router） 14、Vue CLI 脚手架 15、在脚手架中使用 axios
VueCli3.x全栈项目 - 搭建路由和数据模型
weixin_45663697的博客
12-06 208
前言： 以实现登录注册接口为列 1. 在项目文件中创建routers文件夹-api文件夹-users.js 2. 在users.js中写入要用到的请求方法 //login && register const express = require("express"); const router = express.Router(); //调用了一个get请求 //请求地址 api/users/test //返回请求的json数据 //是一个公共接口 router.get("/test",(r
vue-router 3.X 讲解
dorabighead的博客
02-07 1117
Vue Router是Vue.js官方的路由管理器。它和 Vue.js 的核⼼深度集成，让构建单⻚⾯应⽤变得易如反掌。动态路由匹配嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有⾃动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中⾃动降级⾃定义的滚动条⾏为next()用于继续导航。用于中断导航。用于重定向到指定路径。用于中断导航并处理错误。
vue-router 3.x 随笔
hyoka的博客
09-11 194
0.吐槽一手：前面看了下vue.render()&JSX,感觉到头皮发麻，得先放一边了… vue-router 官方教程 vue-router 官方API文档 1.内置组件 1.1 <router-link/> 路由入口组件 默认渲染为<a></a>,可配 1.2 <router-view/> 路由出口组件 渲染成出口组件(这波我解释了，但又好像没有解释…) 2.内置对象 2.1 route path:'', //用于捕获的路径，必选项 name:
路由 vue-router3.x
weixin_40381947的博客
05-05 389
vue的路由使用在SPA应用中的组件跳转，相当于多页面的a标签。 vue2使用vue-router3。 vue3使用vue-router4
Vue.js(八)
shi199434的博客
01-11 247
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 class 属性绑定 我们可以为 v-bind:class
一步一步学Vue（八）
JerremyZhang的博客
07-28 268
一步一步学Vue（八） 2017-07-28 23:24 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑 本篇完成如下场景： 1、系统包含首页、客户信息查询、登录三个模块 2、默认进入系统首页，如果要进行用户查询，则需要进行登录授权 3、查询用户后点击列表项，则进入详情页面 基于上述场景需求描...
Vue-Router路由Vue-CLI脚手架和模块化开发 之Vue-CLI 3.x脚手架工具
weixin_30569033的博客
09-25 155
快速原型开发 在上一篇博文中安装vue-cli 2.x版本 如果安装了vue-cli 2.x或1.x版本，需要先卸载，再安装 @vue/cli 3.x版本； 卸载老版本：npm uninstall vue-cli -g 安装新版本：cnpm install @vue/cli -g 快速原型开发： 需要安装 cnpm...
Vue Router3.x 应用总结
筱竹的博客
11-17 1238
一、项目结构搭建 首先安装下vue-cl 通过vue-cli安装初始化vue项目 vue create vue-dev // vue.config.js const path = require('path') const resolve = dir => { return path.join(__dirname, dir) } const PublicPath = process.env.NODE_ENV === 'production' ? '/vue-dev-dist/' : '/
vue-router3.x详细使用讲解
qq_42880714的博客
04-01 699
vue-router3.x详细使用讲解
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值