Vue Router的安装使用

已于 2022-10-27 16:05:18 修改
阅读量1.3k 收藏 3
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-10-26 16:34:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W2398439780/article/details/127532726
版权
本文介绍了如何使用Vue Router 3.0进行前端路由管理，包括创建项目、安装、创建组件、路由重定向、嵌套路由、动态路由、访问动态参数、简化参数传递以及编程式导航。通过实例展示了Vue Router的基本用法。
摘要由CSDN通过智能技术生成

创建项目

在需要创建项目的文件夹路径中输入cmd即可直接打开来到该路径下的cmd窗口，vue create 创建项目
在这里插入图片描述
手动选择特性
在这里插入图片描述
取消选择Linter【检查语法风格的】
在这里插入图片描述
这里选择vue2搭配vue router3使用
当然你也可以选择vue3 搭配 vue router4使用
在这里插入图片描述
依赖记录位置 package.json
在这里插入图片描述
是否快照？N
在这里插入图片描述

安装vue-router3

 npm install vue-
最低0.47元/天 解锁文章
夏殿灬青葛石
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router的安装和使用
webchang的博客
01-18 542
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue-router学习1：安装与基本用法
qq_40358970的博客
04-18 571
Vue Router 是 Vue.js 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻而易举。嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码。
vue-router的学习
最新发布
weixin_55797790的博客
06-28 754
【代码】vue-router的学习。
Vue Router安装使用教程
weixin_43749805的博客
05-09 987
Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。
Vue 安装 Vue-router 路由安装以及使用
xiaowude_boke的博客
07-18 3950
Vue-router 路由安装以及使用
Vue Router的安装与基本使用方法
qq_40930841的博客
04-29 1435
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
Vue学习笔记进阶篇之vue-router安装及使用方法
08-29
import VueRouter from 'vue-router' // 注册 Vue.use(VueRouter) ``` 然后，我们需要实例化 Vue Router： ```javascript const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component...
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VueRouter安装使用教程
什么都干的派森
05-28 3726
文章目录前言一、安装插件二、引入依赖 前言 2022年2月7日以后，vue-router的默认版本更新为4了 vue2 对应 vue-router3 vue3 对应 vue-router4 根据需求安装 一、安装插件 # vue2对应版本 npm i vue-router@3 # vue3对应版本 npm i vue-router@4 二、引入依赖 main.js加入如下代码 import VueRouter from 'vue-router' ...
vue-router安装和使用
BangD的博客
03-25 158
脚手架创建项目时，没有选择路由；
vue-router的安装及配置
qq_33745371的博客
10-01 257
文章目录先上效果图1.安装vue-router2.创建views目录，创建两个vue页面3.创建router目录，配置index.js4.main.js配置 router6.测试 先上效果图 配置完毕后，访问BeautyNumber与访问YiYuanNumber，是两个不同的页面即为成功 http://localhost:8080/landing/#/BeautyNumber http://localhost:8080/landing/#/YiYuanNumber 1.安装vue-router npm
vue-router配置安装
m0_74265396的博客
06-26 379
【代码】vue-router配置安装。
vue-router安装及使用
jamesge的博客
01-05 644
1.安装vue-router 项目目录中执行npm install vue-router --save-dev npm audit fix（修复缺陷） 2.编写Main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' i
vue之vue-router安装
xiao_lin的博客
11-10 1783
一.原理 1.路由的功能: 路由的功能是建立映射关系,vue-router的作用就是建立url和组件之间的映射关系. 2.支持 通过路径的hash和history可以在url发生改变的情况下不会重新请求资源 hash:location.hash='xxx',在调用该函数后,浏览器的url会发生改变,会出现/#/xxx的结尾,此时路径该变可以被vue-router监听到,但是路径本身改变不会向服务器重新请求资源 例如: 打开一个网页: 改变hash: 结果: history:history中有p
【vue】 vue-router安装和配置方法
热门推荐
m0_56349322的博客
04-04 2万+
vue-router 是 vue.js 官方的路由插件，里面组件和 URL 的映射关系由 vue-route 帮我们管理。 在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换。 第一步： 1.正常初始化项目的时候，会有个 vue-router 供我们选择。 2.如果你不知道插件俺没安装，看下图中是否有此信息即可，如有即存在。 3.如果不存在则通过代码安装插件即可。 代码：npm install vue-router --save 这里要备注一下有的人安装的时候会报错，
vuerouter安装
09-13
Vue Router是Vue.js官方提供的用于路由管理的插件。根据引用，我们可以通过以下步骤来安装Vue Router： 1. 在终端中进入项目的根目录。 2. 运行命令`npm i vue-router@3`来安装Vue Router的最新版本。 引用提到了另一种安装方法，使用npm包安装。可以运行`npm install vue-router --save`将Vue Router作为项目的依赖安装。 在安装完成后，我们可以在项目的src目录下创建一个router文件夹，并在其中创建一个index.js文件来编写路由配置项。这个文件将会被用于创建整个应用的路由实例对象。可以参考中的代码示例来编写路由配置项。 同时，我们需要在项目的main.js文件中导入并应用Vue Router插件。可以通过引入VueRouter插件和路由实例对象，然后使用Vue.use(VueRouter)来注册路由实例对象。最后，通过将路由实例对象作为参数传给Vue实例的router选项来启用Vue Router。 总结起来，安装Vue Router的步骤如下： 1. 在项目根目录中运行命令`npm i vue-router@3`来安装Vue Router的最新版本。 2. 在src目录下创建一个router文件夹，并在其中创建一个index.js文件用于编写路由配置项。 3. 在main.js文件中导入Vue Router插件和路由实例对象，并注册路由实例对象。 4. 在Vue实例中的router选项中将路由实例对象作为参数传入。 这样，我们就完成了Vue Router的安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值