当项目越来越庞大的时候,路由越来越多,而且遍布的页面也越来越多,

当需要更换地址的时候就无比的繁琐,通过学习了解到可以通过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 路由工程化重构的更多相关文章

  1. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  2. vue路由的跳转-路由传参-cookies插件-axios插件-跨域问题-element-ui插件

    ---恢复内容开始--- 项目初始化 创建一个纯净的vue环境项目,手动书写全局的样式配置,全局的main,js配置 (1)如果vue项目在重构或者出错的时候,手动安装node_modules. 如果 ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  5. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  6. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  7. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  8. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  9. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

随机推荐

  1. Flutter学习三之搭建一个简单的项目框架

    上一篇文章介绍了Dart的语法的基本使用,从这篇文章开始,开发一个基于玩Android网站的app.使用的他们开放的api来获取网站数据. 根据网站的结构,我们app最外层框架需要添加一个底部导航栏, ...

  2. hw小技巧(转载)

    小弟也第一次参加hw,经过5天hw,确实也学到了许多的东西,但就本次分享而言,我分享一些我认为在hw里面值得注意的东西以及一些小技巧 0x01 信息收集 信息收集这个多西当然都是老生常谈了,你收集的东 ...

  3. 《Web安全攻防渗透测试实战指南》 各类型 SQL注入 实验过程整理

    Union注入 https://www.jianshu.com/p/8a11bf55aaee Boolean注入 https://www.jianshu.com/p/e4086f59812d 报错注入 ...

  4. 划重点!AWS的湖仓一体使用哪种数据湖格式进行衔接?

    此前Apache Hudi社区一直有小伙伴询问能否使用Amazon Redshift查询Hudi表,现在它终于来了. 现在您可以使用Amazon Redshift查询Amazon S3 数据湖中Apa ...

  5. Mybatis 插件原理解析

    SqlSessionFactory 是 MyBatis 核心类之一,其重要功能是创建 MyBatis 的核心接口 SqlSession.MyBatis 通过 SqlSessionFactoryBuil ...

  6. Java安全之URLDNS链

    Java安全之URLDNS链 0x00 前言 在学习Java的反序列化漏洞的时候,就不得不学习他的一个利用链.很多刚刚入门的对于利用链这个词可能比较陌生.那么这里先来了解一下Java反序列化和反序列化 ...

  7. Web Storage API的介绍和使用

    目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key value存 ...

  8. 1. Spring Boot入门

    1.Spring Boot简介 简化Spring应用开发的一个框架 整个Spring技术栈的一个大整合 J2EE开发的一站式解决方案 优点: – 快速创建独立运行的Spring项目以及与主流框架集成 ...

  9. 027 01 Android 零基础入门 01 Java基础语法 03 Java运算符 07 逻辑“与”运算符

    027 01 Android 零基础入门 01 Java基础语法 03 Java运算符 07 逻辑"与"运算符 本文知识点:Java中的逻辑"与"运算符 逻辑运 ...

  10. 01Linux系统简介

    Linux 简介 一.介绍 1.1 内容 Linux 的历史,Linux 与 Windows 的区别等知识. 1.2 知识点 linux为何物 linux历史简介 linux重要人物 linux与wi ...