vue 路由vue-router

最新推荐文章于 2022-08-14 15:53:50 发布

原创最新推荐文章于 2022-08-14 15:53:50 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router #路由

vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍Vue官方路由插件Vue Router的安装与使用方法，包括如何在单页应用中管理路径，以及在main.js中配置路由，在App.vue中渲染组件，并通过<router-link>标签切换路由。

1.介绍

vue-router： vue官方路由插件。

路由：指单页面应用的路径管理系统。在vue中都是单页应用，相当于只有一个index.html页面，所以无法使用标签，我们使用路由来管理插件路径

2.安装

npm install vue-router --save-dev   //--save-dev命令直接将依赖包信息写入packege.json文件中  --save写在dependencies  -dev写在devDependencies对象下

3.使用

在main.js中配置路由
在这里插入图片描述
在App.vue中渲染配置的组件，因为渲染节点 #app 在main.js中已经绑定

在路由标签<router-link>中通过 to 切换路由路径
在这里插入图片描述
官方文档：https://router.vuejs.org/zh/installation.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hst❀

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在Vue项目中使用mint-ui或者vue-router时报错的终极解决办法

郭宝的博客

03-06

2499

错误日志： 1、These dependencies were not found: * raf.js in ./node_modules/_mint-ui@2.2.1 2、To install them, you can run: npm install --save raf.js vue-lazyload 解决办法：删除本地Vue项目中的node_modules文件夹，之后再...

Vue官方文档（47）: vue-router的使用

amadeus_liu2的博客

11-09

391

vue

参与评论您还未登录，请先登录后发表或查看评论

开发过程中那些包应该放到devDependencies,dependencies

小李科技

08-14

1706

总结日常开发过程中的常用包放置.

--save-dev 和 -dev

weixin_34268579的博客

01-07

886

--save-dev 和 -dev 在项目安装依赖包的时候，一直都对npm i --save 和npm i --save-dev这两个参数的使用比较混乱，现查资料实践了一下做如下总结常见的命令有： npm i modulename 安装模块到项目目录下 npm i -g modulename 将模块安装到全局，具体安装到磁盘那个位置，要看npm config prefix的位置 npm i ...

安装vue/cli的一些警告的解决方法

weixin_44000275的博客

04-25

1万+

一.vue/cli 1.npm WARN vue-virtual-scroller@1.0.0-rc.2 requires a peer of vue@^2.5.21 but none is installed. You must install peer dependencies yourself. 解决方案：1).npm install -g npm-install-peers 2).npm ...

vue2安装vue-router

weixin_43786395的博客

02-16

1万+

项目场景：在vue2中安装vue-router 问题描述：提示：在安装过程中报错，缺少依赖： PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-router npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue_test@0.1.0 npm ERR! Foun

精选资源

vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发

05-27

导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap；从“路径”导入路径；导入...

精选资源

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-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 中router-view不能渲染的解决方法

08-30

Vue Router 中 Router-View 不能渲染的解决方法 Vue Router 是一个基于 Vue.js 的官方路由管理器，它提供了一个灵活且强大的路由系统，可以帮助开发者快速构建单页面应用程序（SPA）。然而，在使用 Vue Router 时，...

精选资源

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的安装使用

热门推荐

涂涂

01-04

3万+

1.安装方法一：在package.json里的package.json的的pendencies里面添加当前需要安装的版本号，最新的版本号可以去gihub上面去搜 "dependencies": { "stylus": "^0.54.5", "vue": "^2.5.2", "vue-router": "^3.0.1" },配置完成之后再执行npm in

vue之elementui,vue-router,echarts导入使用避坑

weixin_44107140的博客

03-11

930

引入vue-router 在package.json中添加依赖版本 "dependencies": { "vue-router": "^3.0.1", }, 然后打开终端，键入npm install，回车，这时会自动下载vue-router相关的包打开项目下的node_modules如果发现有vue-router说明相关的依赖下载好了在项目的src目录下新建router文件夹，此文件放置路由相关的核心文件，然后新建index.js，输入以下内容 import Vue fro

【解决方法】vue输入的命令都报错

weixin_44541213的博客

04-01

714

真的，除了cnpm install这个命令没有报错，其他都是爆红，给我整emo了建议不要在IDEA里使用命令，直接打开cmd运行【解决方法】 1、直接关闭IDEA，在cmd输入（亲测会卡死，无响应） npm install --save-dev cross-env 2、安装后运行 npm install npm run dev 报错，不要慌，说是节点Sass版本7.0.1与^4.0.0不兼容 3、其实是版本太高了，将版本降到@4.14.1 npm uninstall node-sass npm i

vue里package.json中的dependencies和devDependencies

boy火巨的博客

03-27

1万+

dependencies：应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。 devDependencies：开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也...

vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall

HuangsTing的博客

07-23

4645

前言：记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听由于浏览器大小引起的元素变化；安装方法： npm install element-resize-detector 或 <script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script> 使用： <div ref="box"

vue 同时绑定多个class

HuangsTing的博客

03-26

3406

写法一： <div class="demo" :class="{active:isActive}"></div> 写法二： <div class="demo" :class="[{active:isActive},{open:isOpen}]"></div> 绑定的class只能有一个，如果有多个条件判断的class，则必须将其写在一个数组中 ...

elementUI select远程搜索分页，实现滚动条下拉分页

HuangsTing的博客

08-25

3349

//template <el-select v-model="form.userCode" v-el-select-loadmore="loadmore" filterable remote reserve-keyword placeholder="通过手机号进行查询" :remote-method="userRemoteMethod" :loading="personLoading" > <el-option v-for="item in pe

iView 运行iview-project项目时npm run init，报错ERR_INVALID_CALLBACK

HuangsTing的博客

10-08

2999

运行iview-project工程的时候，报错如下： ❯ npm run dev > iview-admin@1.3.1 dev /Users/xiaoyue/myProject > webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.con...