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

当需要更换地址的时候就无比的繁琐,通过学习了解到可以通过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. 5.CyclicBarrier-栅栏

  2. 朴素版和堆优化版dijkstra和朴素版prim算法比较

    1.dijkstra 时间复杂度:O(n^2) n次迭代,每次找到距离集合S最短的点 每次迭代要用找到的点t来更新其他点到S的最短距离. #include<iostream> #inclu ...

  3. LazySysAdmin 靶机渗透

    Vulnhub-LazySysAdmin 靶机渗透 发现六个开放的端口,分别为22,80,139,445,3306以及6667. 139/tcp open netbios-ssn Samba smbd ...

  4. 1.UiPath账密安全保存常见方法

    今天在写流程的时候突然用到密码保存,看到同事不同项目中所用到的方法不同,就看了一下别的同学博客,总结的特别好,自己跟着实操了一遍,受益匪浅. RPA适合于登录不同的系统代替人工操作,而登录系统时难免要 ...

  5. 手撸Mysql原生语句--增删改查

    mysql数据库的增删改查有以下的几种的情况, 1.DDL语句 数据库定义语言: 数据库.表.视图.索引.存储过程,例如CREATE DROP ALTER SHOW 2.DML语句 数据库操纵语言: ...

  6. SQL Server 子查询遇到的坑

    这两天改 Bug 时使用 Sql Server 的子查询遇到了一些问题,特此记录一下,之前用 MySQL 比较多,按照 MySQL 的语法其实是没有问题的. 以下面这张表为例: 执行以下 SQL: s ...

  7. USB虚拟串口 使用基于stm32的RT-Thread

    参考我的RT Thread论坛文章 https://www.rt-thread.org/qa/thread-422644-1-1.html

  8. 【小白学PyTorch】19 TF2模型的存储与载入

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx64501661 ...

  9. 【编程开发】Python---列表

    ERROR:错误 waring:警告,还没到犯错的地步 print(r'\n')  r"字符串",字符串里的所有字符都不转义 str = "abcdef" 如果 ...

  10. IntelliJ IDEA 调试 Java 8 Stream,实在太香了!

    前段时间,栈长发布了一篇关于 Java 8 Optional.map 的实用文章,留言区就有的人说 Java 8 的语法糖不方便调试,还要视情况使用. 留言区也有人说 IntelliJ IDEA 早已 ...