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

当需要更换地址的时候就无比的繁琐,通过学习了解到可以通过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. ava实现时钟小程序【代码】

    其实这个程序并不难,主要是用Java 2D画图,弄一个线程,每隔一秒,依照时针分针秒针各自的速度重新计算它们走过的角度(相对12点方向顺时针偏离的角度),利用这个角度算出它们各自端点的坐标,重绘一次表 ...

  2. 005.操作系统及Linux系统,虚拟机的作用和发展历史

    操作系统及其作用 操作系统发展史 Linux系统 虚拟机 操作系统 操作系统 操作系统的作用 不同领域的主流操作系统 操作系统(Operation System,OS) 操作系统作为接口的示意图 没有 ...

  3. python中yield的用法详解——最简单,最清晰的解释(转载)

    原文链接 首先我要吐槽一下,看程序的过程中遇见了yield这个关键字,然后百度的时候,发现没有一个能简单的让我懂的,讲起来真TM的都是头头是道,什么参数,什么传递的,还口口声声说自己的教程是最简单的, ...

  4. 刷题[安恒DASCTF2020四月春季赛]Ez unserialize

    解题思路 打开直接源码,没别的,审就完事了 代码审计 <?php show_source("index.php"); function write($data) { retu ...

  5. P1000 超级玛丽游戏

    P1000 超级玛丽游戏 https://www.luogu.com.cn/problem/P1000 这就很简单了代码: #include <iostream> #include < ...

  6. 使用free掉的内存的危害

    1 源码 #include <stdio.h> #include <stdlib.h> // 编译环境 gcc int main(void) { printf("** ...

  7. interp1一维数据插值在matlab中的用法

    转载:https://ww2.mathworks.cn/help/matlab/ref/interp1.html?s_tid=srchtitle#btwp6lt-2_1 interp1 一维数据插值( ...

  8. 《C++ primer plus》第3章练习题

    注:有的题设条件自己改动了一下,比如英寸英尺改成米和厘米,部分题目自己加了点额外要求. 1.要求用户输入身高(m),用下划线提示用户输入,将身高转化成"米"加"厘米&qu ...

  9. P4915 帕秋莉的魔导书(动态开点线段树)

    题目背景 帕秋莉有一个巨大的图书馆,里面有数以万计的书,其中大部分为魔导书. 题目描述 魔导书是一种需要钥匙才能看得懂的书,然而只有和书写者同等或更高熟练度的人才能看得见钥匙.因此,每本魔导书都有它自 ...

  10. CRF基础知识以及如何实现Learning,Inference

    CRF:Conditional Random Field,即条件随机场. 首先介绍一下基础背景知识.机器学习中的分类问题可以分为硬分类和软分类.硬分类常见的模型有SVM.PLA.LDA等.SVM可以称 ...