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对象新特性(详情可出门左拐见: ...
随机推荐
- mysql 事务、隔离级别
一.事务的四大特性(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...
- burp suite 之 proxy(代理)
proxy 代理 通过 Options(选项)的edit(编辑) 更改代理的端口号.我的是10086 (不许更改与本机使用端口冲突的端口号) 使用火狐浏览器将代理更改为10086. 抓取火狐浏览器的包 ...
- 什么是 Opcache,如何使用 Opcache
Opcode 是啥? 我们先看一下 PHP 的执行过程: PHP 初始化执行环节,启动 Zend 引擎,加载注册的扩展模块. 初始化后读取 PHP 脚本文件,Zend 引擎对 PHP 文件进行词法分析 ...
- 基于NPOI的Excel导入导出类库
概述 支持多sheet导入导出.导出字段过滤.特性配置导入验证,非空验证,唯一验证,错误标注等 用于基础配置和普通报表的导入导出,对于复杂需求,比如合并列,公式,导出图片等暂不支持 GitHub地址: ...
- Python-如何拆分含有多种分隔符的字符串?
案例: 把某个字符串依据分隔符拆分,该字符包含不同的多种分隔符,如下 s = '12;;7.osjd;.jshdjdknx+' 其中 ; . + 是分隔符 有哪些解决方案? 方法1:通过str.spl ...
- IdentityServer4系列 | 初识基础知识点
前言 我们现在日常生活中,会使用各式各样的应用程序,层出不穷,其中有基于网页浏览方式的应用,有基于手机端的App,甚至有基于流行的公众号和小程序等等,这些应用,我们不仅要实现各个应用的功能之外,还要考 ...
- 井字棋小游戏(C语言)
最近沉迷于<NetHack>.<DCSS>等字符游戏,对其很感兴趣,于是用C语言写了个字符界面的井字棋小游戏.欢迎大家指教. 编写时遇到了一些问题,我原先准备用循环,直到读取到 ...
- c++中的GetModuleFileName函数的用法以及作用
参考: 1. http://blog.sina.com.cn/s/blog_b078a1cb0101fw48.html 2. https://www.cnblogs.com/Satu/p/820393 ...
- vue-integer-plusminus
下载 vue-integer-plusminusvue-integer-plusminus 带有递增和递减按钮的整数输入 现场演示 该组件适合作为自旋按钮,允许键盘功能(向上/向下箭头或页面向上/向下 ...
- Git本地已有项目关联远程仓库
情况: 本地已有项目 远程有个仓库 目的: 本地项目关联远程仓库 首先要把本地项目变成git管理的,也就是建立一个本地仓库,可以在项目目录下面使用git init命令初始化仓库,初始化成功之后会在仓库 ...