vue-router实例详细讲解
最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享;话不多说,直接上代码!!
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import './assets/css/common.css' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '', components: { App } })
import Vue from 'vue' import Router from 'vue-router' import home from '../components/home' //这里可以选择2种写法,一种是写在这里,一种是写在component里面,看下方代码~ Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: home }, { path:'/pagevue', component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue), }, { path:'/nextpagevue', component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue), } ] })
<template> <div class="homeMain"> <div>我是首页</div> <div class="routerName">点我进下一个路由</div> </div> </template> <script> export default{ data(){ return{ } }, methods:{ clickMe(){ this.$router.push({path:'/pagevue'}) } } } </script> <style> </style>
<template> <div class="homeMain"> <div>我是子页面</div> <div class="routerName">点我继续进下一个路由</div> </div> </template> <script type="text/javascript"> export default{ methods:{ returnhome(){ this.$router.push({path:'/nextpagevue'}) } } } </script>
<template> <div class="homeMain"> <div>我是另外一个子页面</div> <div class="routerName">点我回到首页</div> </div> </template> <script type="text/javascript"> export default{ methods:{ clickGohome(){ this.$router.push({path:'/'}) } } } </script>
* { margin: 0; padding: 0; } .homeMain { text-align: center; margin-top: 100px; } .homeMain .routerName { color: #1eb89c; border: 1px solid #1eb89c; margin-top: 20px; } /*# sourceMappingURL=common.css.map */
以上是vue-router实例详细讲解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

对于许多用户来说,破解 Android 电视盒听起来令人畏惧。然而,在 Broadcom 芯片短缺期间,开发人员 Murray R. Van Luyn 面临着寻找 Raspberry Pi 合适替代品的挑战。他与 Armbia 的合作努力

DeepSeek 是一款强大的智能搜索与分析工具,提供网页版和官网两种访问方式。网页版便捷高效,免安装即可使用;官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户,都可以通过 DeepSeek 轻松获取和分析海量数据,提升工作效率、辅助决策和促进创新。

DeepSeek的安装方法有多种,包括:从源码编译(适用于经验丰富的开发者)使用预编译包(适用于Windows用户)使用Docker容器(最便捷,无需担心兼容性)无论选择哪种方法,请仔细阅读官方文档并充分准备,避免不必要的麻烦。

如何下载BitPie比特派钱包App?步骤如下:在AppStore(苹果设备)或GooglePlay商店(安卓设备)中搜索“BitPie比特派钱包”。点击“获取”或“安装”按钮下载应用程序。对于电脑版,访问BitPie比特派钱包官方网站并下载相应软件包。

BITGet 是一款加密货币交易所,提供各种交易服务,包括现货交易、合约交易和衍生品。该交易所成立于 2018 年,总部位于新加坡,致力于为用户提供安全可靠的交易平台。BITGet 提供多种交易对,包括 BTC/USDT、ETH/USDT 和 XRP/USDT。此外,该交易所还在安全性和流动性方面享有盛誉,并提供多种功能,如高级订单类型、杠杆交易和 24/7 全天候客户支持。

1.安装环境(Hyper-V虚拟机):$hostnamectlStatichostname:localhost.localdomainIconname:computer-vmChassis:vmMachineID:renwoles1d8743989a40cb81db696400BootID:renwoles272f4aa59935dcdd0d456501Virtualization:microsoftOperatingSystem:CentOSLinux7(Core)CPEOSName:cpe:

欧易 OKX,全球领先的数字资产交易所,现推出官方安装包,提供安全便捷的交易体验。欧易 OKX 安装包无需通过浏览器访问,可直接在设备上安装独立应用程序,为用户打造稳定高效的交易平台。安装过程简便易懂,用户只需下载最新版本安装包,按照提示一步步操作即可完成安装。

Gate.io是一款受欢迎的加密货币交易所,用户可通过下载其安装包并安装在设备上使用。获取安装包步骤如下:访问Gate.io官方网站,点击“下载”,选择对应操作系统(Windows、Mac或Linux),将安装包下载至计算机。安装过程中建议暂时禁用杀毒软件或防火墙,确保安装顺利。完成后,用户需创建Gate.io账户以开始使用。
