Vue中使用vue-router

Vue中使用vue-router

    • 1. 安装vue-router
    • 2. 创建路由页面
    • 3. 创建router文件
    • 4. 挂载router
    • 5. 使用

1. 安装vue-router

npm install vue-router@3.6.5 --save

2. 创建路由页面

HomeView.vue

<template><div>home</div>
</template><script>export default {name:'HmeView',data(){return{}},methods:{},created(){},mounted(){}}
</script><style lang=scss>
</style>

About.vue

<template><div>about</div>
</template><script>export default {name:'About',data(){return{}},methods:{},created(){},mounted(){}}
</script><style lang=scss>
</style>

3. 创建router文件

  • 创建router文件夹,并创建index.js
//引入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入路由页面
import HomeView from '../views/HomeView.vue'
import VideoView from '../views/VideoView.vue'Vue.use(VueRouter)//定义路由
const routes = [{path:'/',name:'home',component: HomeView},{path:'/about',name:'about',component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue')}
]
//创建路由
const router = new VueRouter({//模式mode:'history',//使用定义的路由routes
})export default router

4. 挂载router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

5. 使用

App.vue

<template><div id='app'><!-- 使⽤router-link组件来导航 --><!-- 通过传⼊to属性指定连接 --><!-- router-link默认会被渲染成⼀个a标签 --><router-link to='home'>Home</router-link><router-link :to={name:'about'}>About</router-link><!-- 路由出⼝ 路由渲染位置 --><router-view/></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue + Element UI 前端篇(十五):嵌套外部网页

Vue Element UI 实现权限管理系统 前端篇&#xff08;十五&#xff09;&#xff1a;嵌套外部网页 嵌套外部网页 在有些时候&#xff0c;我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面&#xff0c;接口文档页面等。 这个时候就要求我们的导航菜…

让你的编程之路更加顺畅——推荐一款前端编程神器

引子&#xff1a;在当今的数字化时代&#xff0c;编程已经成为一种不可或缺的技能。而前端开发&#xff0c;作为整个应用程序的“门面”&#xff0c;更是需要开发人员具备优秀的网页设计和编程能力。今天&#xff0c;我要向大家推荐一款专门为前端开发者打造的APP&#xff0c;它…

指令系统(408)

一、拓展操作码指令格式 【2017 统考】某计算机按字节编址&#xff0c;指令字长固定且只有两种指令格式&#xff0c;其中三地址指令29条、二地址指令107条&#xff0c;每个地址字段6位&#xff0c;则指令字长至少应该是&#xff08; A&#xff09; A、24位 B、26位 …

Autosar诊断实战系列16-UDS19 06扩展数据配置及工程问题讨论

本文框架 前言1. 再聊19 06服务响应格式2. 扩展帧数据配置及工程问题讨论2.1 扩展帧数据配置2.1.1 添加扩展数据需要存储的内容2.1.2 DemExtendedDataRecordClass内容关联2.1.3 DemDTCAttributes关联扩展数据2.2 工程问题讨论2.2.1 没有故障情况下扩展数据如何回复?前言 在本…

C# 什么是继承和派生

C# 什么是继承和派生 在 C# 中&#xff0c;继承&#xff08;Inheritance&#xff09;是一种机制&#xff0c;它允许一个类&#xff08;子类&#xff09;从另一个类&#xff08;父类&#xff09;中继承属性和方法。这种关系使得子类可以重用父类的代码&#xff0c;同时可以在子…

微信小程序云开发-云函数发起https请求简易封装函数

一、前言 在日常的开发中&#xff0c;经常会遇到需要请求第三方API的情况&#xff0c;例如请求实名认证接口、IP转换地址接口等等。这些请求放在小程序前端的话&#xff0c;就需要把密钥放在客户端&#xff0c;在安全性上没这么高。 因此&#xff0c;一般是放在云函数端去访问…

Linux下的系统编程——进程间的通信(九)

一、进程间通信常用方式 IPC方式&#xff1a; Linux环境下&#xff0c;进程地址空间相互独立&#xff0c;每个进程各自有不同的用户地址空间。任何一个进程的全局变量在另一个进程中都看不到&#xff0c;所以进程和进程之间不能相互访问&#xff0c;要交换数据必须通过内核&am…

VIRTIO-BLK代码分析(4)VIRTIO设备中断的注入

VIRTIO设备中断包括vq中断和config中断。Vq中断用于通知Guest已完成数据的处理&#xff0c;虚拟机中可以完成IO请求。Vq中断的模拟是通过irqfd实现的&#xff0c;它将虚拟机中断与irqfd关联上&#xff08;KVM_SET_GSI_ROUTING和KVM_IRQFD&#xff09;&#xff0c;当虚拟机中访问…

绘制钻头芯厚变化图

import numpy as np import matplotlib.pyplot as plt posnp.array([0.05,0.5,0.97,3]) data_m1np.array([0.088,0.093,0.098,0.116]) data_m2data_m1-0.01 data_m3data_m1-0.02 fig plt.figure(figsize(5, 4)) plt.rcParams[xtick.direction] in # 将x周的刻度线方向设置向…

数据库 设计规范数据库设计样例

目录 5 数据库5.1 数据库命名规范5.2 数据库字段命名5.2.1 字段命名规范5.2.2 命名规范5.2.3 待优化命名示例5.2.4 字段类型规范5.2.5数据库中每个字段的规范描述 5.3表设计5.4 参考设计5.4.1 应用场景5.4.2 需求分析5.4.3 设计思路5.4.4 表结构设计5.4.5 缓存策略Q1 冗余设计和…

【HCIE】01.IGP高级特性

高级特性&#xff1a;一条命令解决一个问题 OSPF快速收敛机制 发生故障重新计算拓扑的过程叫做收敛&#xff0c;设备现在本身就是PRC算法和I-SPF算法 PRC&#xff08;针对叶子节点&#xff0c;叶子代表路由&#xff09; 不需要命令配置&#xff0c;就是ospf的特性&#xff…

RISC-V(2)——特权级及特权指令集

目录 1. 特权级 2. 控制和状态寄存器&#xff08;CSR&#xff09; 2.1 分类 2.2 分析 1. 特权级 一个 RISC-V 硬件线程&#xff08;hart&#xff09;是运行在某个特权级上的&#xff0c;这个特权级被编码到一个或者多个 CSR&#xff08;control and status register&a…

Java版企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看…

前端禁止别人打开控制台调试自己的代码

为了防止非法的调试和修改&#xff0c;同时限制别人使用python爬虫&#xff0c;盗取自己网站的数据&#xff0c;我们需要在写一段代码来防止非法入侵调试&#xff0c;增加网站的安全性 (() > {function block() {if (window.outerHeight - window.innerHeight > 200 || w…

ABAP FB05 清账函数:POSTING_INTERFACE_CLEARING

清账相关事物代码&#xff1a; FB05 相关函数&#xff1a;POSTING_INTERFACE_START POSTING_INTERFACE_CLEARING DATA: LT_BLNTAB TYPE STANDARD TABLE OF BLNTAB.DATA: LS_BLNTAB TYPE BLNTAB.DATA: LT_FTCLEAR TYPE STANDARD TABLE OF FTCLEAR.DATA: LS…

华纳云:linux服务器查看端口的办法

在Linux服务器上查看端口的状态和监听情况&#xff0c;您可以使用一些命令。以下是几种常用的方法&#xff1a; netstat命令&#xff1a; 使用netstat命令可以查看服务器上的端口情况。要查看所有活动连接和监听端口&#xff0c;可以运行以下命令&#xff1a; netstat -tuln …

Vue + Element UI 前端篇(八):管理应用状态

使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的&#xff0c;但是因为组件封装的原因&#xff0c;隐藏按钮在头部组件&#xff0c;而导航菜单在导航菜单组件&#xff0c;这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改…

postgresql 安装教程

postgresql 安装教程 本文以window 15版本为教程 文章目录 postgresql 安装教程1.下载地址2.以管理员身份运行3.选择安装路径&#xff0c;点击Next4.选择组件&#xff08;默认都勾选&#xff09;&#xff0c;点击Next5.选择数据存储路径&#xff0c;点击Next6.设置超级用户的…

指针和字符数组笔试题及其解析(第三组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 第三组笔试题 char *p "abcdef";printf("%d\n", sizeof(p)); printf("%d\n", sizeof(p1)); printf("%d\n", sizeof(*p)); printf("%d\n", sizeof(p[0])); printf("%…

Android逆向学习(四)app修改smali函数跳过弹窗广告,等待广告,更新提醒

Android逆向学习&#xff08;四&#xff09;app修改smali函数跳过弹窗广告&#xff0c;等待广告&#xff0c;更新提醒 一、写在前面 这是吾爱破解课程的第三个练习&#xff0c;我在写这篇博客时遇到了vscode插件bug&#xff0c;已经想办法联系原作者了&#xff0c;希望能够尽…