位置: 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文字识别实战(附源码和数据集 超详细必看)(计算机视觉:一种现代方法)

  • 关联方的借款用什么科目核算
  • 如何申报个人所得税减免项目
  • 办税人是纳税人吗
  • 金税盘解锁后是否可以直接使用
  • 差旅费跨年报销说明
  • 印花税按合同的多少收
  • 哪个会计科目必须对全部项目发函证
  • 建筑企业小规模纳税人升为一般纳税人条件
  • 规划设计合同需要缴纳印花税吗为什么
  • 租入固定资产改扩建
  • 工程服务的税率是多少?
  • 销项税额转出减去还是加上
  • 延期申报预缴税款比例
  • 金融负债
  • 顾客退货补差价怎么做账?
  • 销售方退款回来要怎么处理?
  • 调试阶段是什么意思
  • 打桩和挖土
  • 如何处理没有录音的人
  • 小微企业按季度预缴企业所得税
  • 免抵税额是否能抵销项税额呢?
  • 虚列成本费用的后果
  • 金融业融资租赁
  • 税前可以扣除的管理费用计算公式
  • 职工报销费用的处理流程
  • 电子商务企业类别有哪些
  • 党建工作经费计提比例
  • 已发货未开票的货物需要结转成本吗
  • win10玩游戏提示内存不足无法处理此命令
  • 电脑如何设置屏幕常亮
  • php类的作用
  • 退回多收款项,提现金,如何做账
  • 递延所得税当期要交吗
  • gain_trickler_3202.exe 进程查询 gain_trickler_3202进程是什么文件
  • php中header的用法
  • 收取职工交来伙食费如何入账
  • yii2框架中文手册
  • 运筹最优化方法有哪些
  • 固定资产改造更新
  • 不抵扣的发票需要认证吗
  • 研发企业所得税税率
  • 打车费的会计分录
  • 定期定额自行申报表
  • 预缴所得税年底处理账务吗
  • 设置sql server的安全认证模式为混合认证模式
  • db2获取当前年月日
  • 固定资产清理科目有余额吗
  • 验资费如何做账务处理
  • 销售费用专票能抵扣吗
  • 已抵扣进项税额转出的会计分录怎么做
  • 交易性金融资产的入账价值
  • 进项税税额是多少
  • 结转损益不平是什么原因造成的
  • 关于外贸企业出口的规定
  • 学校固定资产账记法
  • sql语句提取字符串中数字
  • macbook的dock栏怎么不见了
  • Win7笔记本突然wifi功能没了
  • linuxvi编辑器的用法
  • php.ini linux
  • perl调用perl脚本
  • jquery 使用
  • perl-v
  • opengl opengl
  • 到了这个年纪吉他谱完整版
  • jquery如何实现双向绑定
  • vue组件精讲
  • js控制display属性
  • node 创建文件夹
  • ug合并命令在哪
  • js确认框选择取消时退出程序怎么设置
  • jquery.serialize() 函数语法及简单实例
  • bootstrap jumbotron
  • 自然人电子税务局网页端
  • 税控盘开票软件下载官网
  • 国家税务总局惠州仲恺高新技术产业开发区税务局
  • 哈尔滨国家税务局客服电话
  • 税务ca证书过期
  • 税务局签合同
  • 继承房产过户后可以要求分割吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设