vue-router 路由器超详细基础介绍

最新推荐文章于 2022-06-17 15:34:05 发布
最新推荐文章于 2022-06-17 15:34:05 发布
阅读量1.1k 收藏 7
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44163269/article/details/105150962
版权

目录

  1. 介绍
  2. 安装
  3. 具体内容介绍
  4. router内的index.js介绍

1. 介绍

路由器：它是一个器皿，就是一个容器

  • 比如酒瓶，它里面放的是酒
  • 路由它里面放的是路由

根据你的访问地址来决定你要使用的组件
单页面应用：SPA

  • 应用，就是你的项目，我的这个项目是单页面，也就是说我的这个项目只有一个页面
  • 单页面也就是说我可以实现多页面的功能，但是我这里面就是一个页面
  • 根据你的路由来实现的

2. 安装

这里提供项目脚手架详细安装

有问题可以点击上面链接查看，这里不展示详细安装步骤

  1. 安装的时候选择上这个，他就是路由器
    在这里插入图片描述
    2.第个重要步骤
    在这里插入图片描述
    Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
    是否要使用history模式？ y

路由有两种模式： history hash
在这里插入图片描述安装完成后会看到它

3. 具体内容介绍

增加了router之后的结构

  • 增加了一个router文件夹： index.js–> 用于存放router配置信息
  • views:存放路由组件（）
    • 之前在做多页面的时候有首页、详情、列表页等。我的路由组件它的级别就是页面级别的
    • 就是说我之前的列表页等，在我的单页面应用当中它就是一个组件
    • 就是之前所做的多页面中的每个页面在我的这里面他都是一个路由组件
      在这里插入图片描述
      这就是路由组件

main.js内容出现关于 router 内容
在这里插入图片描述

4. router内的index.js介绍

由于内容过多，这里图片展示
在这里插入图片描述
每个路由介绍
在这里插入图片描述
path:’/about’, 该路由访问的地址
name:‘Home’, 作为参数，路由跳转
component:Home 当地址符合要求时，所使用的组件

web前端 zxp
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue全家桶 Vue-router的详细介绍
m0_71485750的博客
07-31 1139
在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；...
vue-router(路由器)
HHYZBC的博客
06-17 237
目录vue-router 的理解对 SPA 应用的理解路由的理解基本使用几个注意点多级路由（多级路由）路由的query参数命名路由路由的params参数路由的props配置的replace属性编程式路由导航缓存路由组件两个新的生命周期钩子路由守卫全局守卫独享守卫:路由器的两种工作模式vue 的一个插件库，专门用来实现 SPA 应用以下是vue-router的官方文档Vue Router (vuejs.org)https://v3.router.vuejs.org/zh/单页 Web 应用（single pa
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Vue路由（vue-router）详细讲解指南
YBWarmYoung的博客
01-19 1万+
中文文档：https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 1，route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； 2，routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
vuex-router-sync：轻松保持vue-router和vuex存储同步
02-06
Vuex路由器同步 同步Vue路由器当前的$route作为Vuex存储状态的一部分。用法# the latest version works only with vue-router >= 2.0npm install vuex-router-sync# for usage with vue-router < 2.0:npm install...
vue-router-tab:Vue.js tab 组件，基于 Vue Router
08-05
Vue 路由器选项卡 Vue.js 选项卡组件，基于 Vue Router。 :pushpin: 特征 :check_mark_button: 打开或切换到响应路由更改的选项卡 :check_mark_button: 标签鼠标滚轮滚动 :check_mark_button: 标签拖动排序 :...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
Vue路由器调用Webpack插件 typescript 重写了新版本，同时支持vue2.x和vue3.x 根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install ...
vue 路由的内置组件 router-view 详细介绍（有图有真相）
热门推荐
北芒的博客
03-29 5万+
介绍 当你的地址符合我的路由要求的时候，会把路由的组件在 你的界面中呈现，而这个界面实在 App.vue里面 当你打开 App.vue就会在里面发现这两个组件 这两个是 vue 给你提供的两个 vue 内置组件 功能介绍 router-link 实现路由之间的跳转 router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view ...
vue 获取本地图片路径（动态引入 / 静态引入）
北芒的博客
05-10 2万+
开篇 首先，我们直接 img src = “xxx” 就可以获取图片，但是我们需要的不是直接写在上面的 地址 而是从 data 数据当中获取到的地址 此方法有别于 从数据库中获取的数据 一、首先我们在 img 当中引用 <template> <div> <img :src="arr.url"> </div> </template> 记住这里是 :src 里面的是我数据给传递过来的数据 二、设置数据 data() &l.
vue项目文件中的 main.js
北芒的博客
03-31 1万+
1. 干什么的？ 是初始化vue实例并使用需要的插件 并且将你的内容渲染到主页面上 2. 初始内容介绍 import Vue from 'vue' // 引入VUE核心库 import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件 Vue.config.productionTip = false; // 是否要在生产环境当中给...
vue项目中的文件夹都是什么（小白必看）
北芒的博客
03-27 1万+
在此之前你已经安装好了项目 vue.js脚手架 @vue/cli 手把手教你安装配置 这是没有安装任何工具为前提的最基础教程 （都有工具 简介图 在文章底部） 这里我没有安装任何工具，初始界面就是这样的 开始介绍 public public （翻译为 公共 的意思） 里面存放主页面信息 （单页面应用） 单页面应用： 我的这个项目只有这一个页面，当我要切换内容的时候，它都是在这一...
vue中定义组件 components（局部 / 全局）
北芒的博客
03-24 1万+
1. 基本信息 组件是对你 html 标签的一个拓展 组件里面的内容就是你模板的内容 组件分为全局组件和局部组件 对象当中定义的组件都是局部组件 2. 如何定义（注册）组件 定义组件需要使用components选项。components是一个对象，该对象的属性是组件的相关配置信息。 组件当中至少应该拥有template属性或render方法。 使用时，可以将组件的名字作为标签来使用。...
使用 vue 来获取其他网站的数据八步走
北芒的博客
04-01 4900
开始前的准备 安装 vue 项目 安装 vuex 插件 安装 axios 内容仅供学习使用 1. 第一步 创建一个页面用于存放并展示你获取的数据 写入基础信息： <template> <div> </div> </template> -----------------------------------------------...
如何开启 vue 项目
北芒的博客
03-27 3945
在读此文章再此之前默认你已经安装了 vue 项目 vue项目 脚手架@vue/cli安装 运行项目 cmd 运行 vue create serve 运行的目录要在你的项目文件夹下 比如我有一个项目 one 那我就要双击进入 one 项目，在这个目录下运行 展示： 回车运行 如果地址错误： 浏览器打开项目 在浏览器的地址栏输入 上图蓝字 的地址 第一个是你的本地服务地址（...
vue 实现表单下拉框 --- 并且获取其中的值
北芒的博客
06-18 3615
说明 使用到了 v-model 指令 开始使用 获取下拉表单中的值 原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化（关键） <option value="1">一---1</option> <option value.
vue 定义一个全局实例 Vue.prototype
北芒的博客
07-22 3396
定义 与 使用 定义：Vue.prototype.$appName = 'My App' 使用：this.$appName （任何地方） 介绍 ---------- 来自官方文档 使用场景：你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用 Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行： n.
vue-router在线引用
最新发布
04-04
history: VueRouter.createWebHashHistory(), routes }) const app = Vue.createApp({}) app.use(router) app.mount('#app') ``` 这里我们创建了一个路由器router，将其挂载到Vue实例上。然后在模板中使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值