位置: IT常识 - 正文

Vue的路由配置(Vue2和Vue3的路由配置)(vue路由的几种方式)

编辑:rootadmin
Vue的路由配置(Vue2和Vue3的路由配置) 系列文章目录

推荐整理分享Vue的路由配置(Vue2和Vue3的路由配置)(vue路由的几种方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由的几种方式,vue中路由配置,vue的路由配置和过滤器配置,vue3.0路由配置,vue 路由两种方式,vue的路由配置和过滤器配置,vue路由使用方法,vue的路由配置和过滤器配置,内容如对您有帮助,希望把文章链接给更多的朋友!

Tips:使用Vue3开发项目已经有一段时间了,关于Vue2的路由是如何一步一步搭建的都快要忘记了,今天写着篇文章主要就是回顾一下,在Vue2和Vue3中我们是如何一步一步的配置路由的。

提示:最好的进步就是有闲暇时间就敲一敲代码!!!!!

文章目录系列文章目录一、路由是什么?二、Vue2中路由的创建步骤1.安装正确的路由版本(这里我踩坑了)2.vue2中配置路由的步骤步骤如下:代码如下图所示如下图所示:三、Vue3中路由的创建步骤1.步骤如下代码如下图所示如下图所示:一、路由是什么?

Vue中的路由就是.SPA(single page application 单页应用程序) 的路径管理器。

vue-router是Vue.js官方的路由插件,用于构建单页面应用。vue的单页面应用是基于路由和组件的,设定访问路径,并将路径和组件映射起来。在vue-router单页面应用中,路径之间的切换,就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

二、Vue2中路由的创建步骤1.安装正确的路由版本(这里我踩坑了)

1.首先安装vue-router的时候需要确定版本。 Vue2.0采用的 vue-router 版本为 @^3.5.1

npm i vue-router@3.5.1 -s // Vue2安装的方式

2.直接 npm i vue-router -s 这种方式安装会安装最新版本(适用于Vue3)

npm i vue-router -s //Vue3安装的方式2.vue2中配置路由的步骤步骤如下:Vue的路由配置(Vue2和Vue3的路由配置)(vue路由的几种方式)

1.安装 vue-router@3.5.1 2.创建 router文件夹 并创建 index.js 3.引入VueRouter 和 Vue 4.Vue.use(VueRouter) 5.创建VueRouter实例: const router = new VueRouter({ routes}) 6.配置routes (结构如下图所示) 7.导出router 8. 在main.js中导入刚才的 router 9.注册router 10.创建 router-link 和 router-view

代码如下图所示

路由文件代码:

//1.导入VueRouterimport Vue from "vue";import VueRouter from 'vue-router'import HelloWord from "../components/HelloWorld.vue";//2.使用路由Vue.use(VueRouter);//3.创建VueRouter的实例const router = new VueRouter({ //tips:不想要 #(锚点)就添加下面代码 mode:'history', //4.配置路由的path和组件 routes :[ { path: "/", name:'home', component: HelloWord, }, { path: "/about", name:'anout', component: () => import("../components/About.vue"), }, ]})//5.导入路由实例export default router

入口文件代码:

import Vue from 'vue'import App from './App.vue'//6.引入导出的路由import router from './router/index'Vue.config.productionTip = falsenew Vue({ //7.注册路由 router, render: h => h(App),}).$mount('#app')如下图所示:

三、Vue3中路由的创建步骤1.步骤如下

1. 创建对应的文件夹router 创建 index.js文件, 2. 安装vue-router (vue3.0直接安装就行) 3. 导入createRouter 和 createWebHashHistory 4. 配置routes 5. 使用createRouter注册routes和配置路由模式 6. 导出路由 7. 在main.js中 导入router ,并通过链式 .use(router) 注册

代码如下图所示

路由文件代码:

import { createRouter, createWebHashHistory } from "vue-router"; import HelloWord from '../components/HelloWorld.vue'const router = createRouter({ history: createWebHashHistory(), routes: [ { path: "/", component:HelloWord }, { path:"/about", component:() => import("../components/About.vue") } ],});export default router

入口文件代码:

import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')如下图所示:

本文链接地址:https://www.jiuchutong.com/zhishi/295981.html 转载请保留说明!

上一篇:从卷积神经网络(CNN)到图卷积神经网络(GCN)详解(卷积神经网络结构)

下一篇:【Keras+计算机视觉+Tensorflow】OCR文字识别实战(附源码和数据集 超详细必看)(计算机视觉:一种现代方法)

  • 微信怎么设置呼叫我时朋友也可听见我的铃声(微信怎么设置呼叫转移功能)

    微信怎么设置呼叫我时朋友也可听见我的铃声(微信怎么设置呼叫转移功能)

  • 爱奇艺怎么截取视频片段(爱奇艺怎么截取片段保存到相册)

    爱奇艺怎么截取视频片段(爱奇艺怎么截取片段保存到相册)

  • ipad1现在还能用吗	(ipad1现在还能用吗2022)

    ipad1现在还能用吗 (ipad1现在还能用吗2022)

  • 小米手机开流量没反应(小米手机开流量老是断网)

    小米手机开流量没反应(小米手机开流量老是断网)

  • 网易邮箱两年了还没注销(网易邮箱超过两年未登录删除邮件如何找回?)

    网易邮箱两年了还没注销(网易邮箱超过两年未登录删除邮件如何找回?)

  • 苹果手机换了屏幕总成发烫(苹果手机换了屏幕面容ID不能用了)

    苹果手机换了屏幕总成发烫(苹果手机换了屏幕面容ID不能用了)

  • 能有微信付款的购物app(有微信付款的冰箱吗)

    能有微信付款的购物app(有微信付款的冰箱吗)

  • 数据线破了会漏电吗(数据线破裂会不会有电)

    数据线破了会漏电吗(数据线破裂会不会有电)

  • 华为手机微信支付怎么刷脸(华为手机微信支付设置在哪里)

    华为手机微信支付怎么刷脸(华为手机微信支付设置在哪里)

  • 拼多多是b2c还是c2c(拼多多属于b2b吗)

    拼多多是b2c还是c2c(拼多多属于b2b吗)

  • 工作服统计表格怎么做(工作服统计表格excel)

    工作服统计表格怎么做(工作服统计表格excel)

  • 华为手机上显示hd是什么意思,(华为手机上显示电话标志斜杠)

    华为手机上显示hd是什么意思,(华为手机上显示电话标志斜杠)

  • 苹果applecart+版什么意思(applecarplat)

    苹果applecart+版什么意思(applecarplat)

  • 红米k30pro屏幕尺寸(红米K30Pro屏幕尺寸)

    红米k30pro屏幕尺寸(红米K30Pro屏幕尺寸)

  • 华为畅享10怎么上卡(华为畅享10怎么强制恢复出厂设置)

    华为畅享10怎么上卡(华为畅享10怎么强制恢复出厂设置)

  • gw是什么单位(gw是什么单位的缩写)

    gw是什么单位(gw是什么单位的缩写)

  • 怎么可以看爱奇艺会员(怎么可以看爱奇艺的视频)

    怎么可以看爱奇艺会员(怎么可以看爱奇艺的视频)

  • 华为手机有carplay功能吗(华为手机有carplay车载功能吗)

    华为手机有carplay功能吗(华为手机有carplay车载功能吗)

  • ipad自带钢琴在哪(ipad自带的钢琴)

    ipad自带钢琴在哪(ipad自带的钢琴)

  • 苹果手机抖音怎么看完整视频(苹果手机抖音怎么录屏)

    苹果手机抖音怎么看完整视频(苹果手机抖音怎么录屏)

  • 华为P30?pro天气怎么设置摄氏度(p30pro天气设置)

    华为P30?pro天气怎么设置摄氏度(p30pro天气设置)

  • 如何删除脚注或尾注的横线(删除脚注怎么删除)

    如何删除脚注或尾注的横线(删除脚注怎么删除)

  • znew命令  将.Z压缩包重新转化.gz压缩包(命令行 压缩)

    znew命令 将.Z压缩包重新转化.gz压缩包(命令行 压缩)

  • 初级职称经济法目录
  • 账面价值大于计税基础是什么差异
  • 什么是应付职工薪酬设定提存计划
  • 借款合同印花税减免优惠政策2022
  • 开办期的所得税年度申报
  • 经营性负债的作用
  • 增值税报税后多久缴纳期限
  • 减免所得税额是怎么算出来的2022
  • 自建固定资产入账
  • 劳务工和临时工
  • 事业支出期末如何结转?
  • 床位周转率计算公式
  • 单位月工资总额
  • 公司支付收益权转让怎么做账?
  • 税控设备指什么
  • 税控服务费全额抵扣文件
  • 城镇土地使用税减免税政策
  • 怎么做销售二手车
  • 年数总和法折旧公式
  • 增值税普通发票和专用发票有什么区别
  • 如何理解总分机的概念
  • mac book air文件夹怎么重命名
  • 腾讯管家游戏加速怎么开
  • 科技研发公司经营范围包括哪些
  • 苹果系统权限管理在哪找
  • 公司内部罚款的备注怎么写劳动仲裁
  • php中this的用法
  • 设计版权费用
  • 小规模纳税人结转免交增值税
  • 如何申请公积金装修房子
  • php常用设计模式(大总结)
  • 土地使用税滞纳金不得超过
  • 进程mmc.exe
  • 销售费用里面的支付的安装人工费汇算清缴时计入哪里
  • 开立异地银行结息通知
  • Salzburg with Salzach river, Austria (© MacEaton/Alamy)
  • 玄武湖公园游玩
  • php 表单
  • symfony2.4的twig中date用法分析
  • 现金流量表中如何考虑折旧费
  • php同时使用session和cookie来保存用户登录信息的实现代码
  • 工程款清账的句子发朋友圈
  • 增值税发票退回重开期限
  • 计提短期借款利息会计分录怎么写
  • 幼儿园免征增值税账务处理
  • 商品发生报废如何处罚
  • 债权投资利息收入调增还是调减
  • 应收账款占比是什么
  • 金蝶可以自动结转增值税吗
  • 其他债权投资有减值吗
  • 期末留底的进项税怎么下账
  • 人工费支付协议
  • 委托加工的相关法律规定
  • 社会保险费计提分录
  • 环境保护税法自什么时候起施行
  • 合同履约成本的会计分录
  • 材料采购成本的计算分录
  • 在建工程转固定资产的账务处理
  • 净资产收益率怎么算出来的
  • 同期增长率如何计算
  • 建账的基本流程图
  • mysql压测调优
  • solaris命令
  • 卡巴斯基 试用
  • 使用注册表删除软件时,有些拒绝访问
  • linux的tar命令用法
  • win7系统如何关闭更新系统
  • xp无法加载配置文件
  • kwconfig.exe
  • win10天气组件
  • easyui datagrid resize
  • 超级硬盘数据恢复软件v2.7
  • linux shell实战
  • IE8 新增的Javascript 开发接口说明
  • javascript基础入门视频教程
  • jquery文档处理有哪些
  • python 电话号码
  • 广东税务总局发票怎么开
  • 江苏发票真伪查询
  • 河南个体工商户营业执照年检
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设