vue 路由工程化重构
当项目越来越庞大的时候,路由越来越多,而且遍布的页面也越来越多,
当需要更换地址的时候就无比的繁琐,通过学习了解到可以通过router.js来统一调控
原理: 在路由页面通过name来进行跳转,传入的是{name:'...'}
这样需要修改页面路径的时候只需要在router.js里面修改路径就可以了
router/index.js
export default new Router({
mode: 'history',
base: _dirname,
linkActiveClass: "active",
routes: [
{
path: '/',
name: 'First',
component: first
},
{
path: '/agedserve',
name: 'Agedserve',
component: agedserve
},
{
path: '/carserve',
name: 'Carserve',
component: carserve
},
{
path: '/safeguard',
name: 'Safeguard',
component: safeguard
},
{
path: '/verbpage',
name: 'Verbpage',
component: verbpage
}
]
})
路由页面
<router-link tag="li" :to="{name:'Verbpage', params: {}}">
<img src="../../static/images/insurance-icon.png" alt="icon">
<div class="project-child">
<h3>风险评测</h3>
<p></p>
</div>
</router-link>
vue 路由工程化重构的更多相关文章
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件
---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
随机推荐
- Flutter学习三之搭建一个简单的项目框架
上一篇文章介绍了Dart的语法的基本使用,从这篇文章开始,开发一个基于玩Android网站的app.使用的他们开放的api来获取网站数据. 根据网站的结构,我们app最外层框架需要添加一个底部导航栏, ...
- hw小技巧(转载)
小弟也第一次参加hw,经过5天hw,确实也学到了许多的东西,但就本次分享而言,我分享一些我认为在hw里面值得注意的东西以及一些小技巧 0x01 信息收集 信息收集这个多西当然都是老生常谈了,你收集的东 ...
- 《Web安全攻防渗透测试实战指南》 各类型 SQL注入 实验过程整理
Union注入 https://www.jianshu.com/p/8a11bf55aaee Boolean注入 https://www.jianshu.com/p/e4086f59812d 报错注入 ...
- 划重点!AWS的湖仓一体使用哪种数据湖格式进行衔接?
此前Apache Hudi社区一直有小伙伴询问能否使用Amazon Redshift查询Hudi表,现在它终于来了. 现在您可以使用Amazon Redshift查询Amazon S3 数据湖中Apa ...
- Mybatis 插件原理解析
SqlSessionFactory 是 MyBatis 核心类之一,其重要功能是创建 MyBatis 的核心接口 SqlSession.MyBatis 通过 SqlSessionFactoryBuil ...
- Java安全之URLDNS链
Java安全之URLDNS链 0x00 前言 在学习Java的反序列化漏洞的时候,就不得不学习他的一个利用链.很多刚刚入门的对于利用链这个词可能比较陌生.那么这里先来了解一下Java反序列化和反序列化 ...
- Web Storage API的介绍和使用
目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...
- 1. Spring Boot入门
1.Spring Boot简介 简化Spring应用开发的一个框架 整个Spring技术栈的一个大整合 J2EE开发的一站式解决方案 优点: – 快速创建独立运行的Spring项目以及与主流框架集成 ...
- 027 01 Android 零基础入门 01 Java基础语法 03 Java运算符 07 逻辑“与”运算符
027 01 Android 零基础入门 01 Java基础语法 03 Java运算符 07 逻辑"与"运算符 本文知识点:Java中的逻辑"与"运算符 逻辑运 ...
- 01Linux系统简介
Linux 简介 一.介绍 1.1 内容 Linux 的历史,Linux 与 Windows 的区别等知识. 1.2 知识点 linux为何物 linux历史简介 linux重要人物 linux与wi ...