vue1.0配置路由
1,//创建 router 实例
var
router =
new
VueRouter()
2,//components下新建home.vue组件,并在app.vue中引入模块:
import home from './components/home/home.vue';
3,//路由地址
router.map({
//路由规则
})
4,//启动一个启用了路由的应用
router.start(App,
'app'
)
5,Vue作用范围内设置路由跳转
<a v-link="{path:'/home'}"></a>
<router-view></router-view>//路由渲染出来的内容的位置
main.js文件如下:
路由嵌套:
1,新建Login.vue 和 Reg.vue
2,import引入
3,subroute设置
4,vue文件设置 <a a-link="{path:'地址'}"></a>设置路由跳转地址
.vue文件如下
main.js文件如下
vue1.0配置路由的更多相关文章
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- 配置子目录Web.config使其消除继承,iis7.0设置路由
iis7.0设置路由 ,url转向,伪静态 <system.webServer> <modules runAllManagedModulesForAllRequests=& ...
- asp.netCore3.0 中使用app.UseMvc() 配置路由
一.新配置路由策略 在 Asp.Net Core 3.0中默认不再支持app.UserMvc() 方式配置路由 系统. 而是使用新的模式,点击查看asp.netCore3.0区域和路由配置变化 默认 ...
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- ESXi 6.0 配置
ESXi 6.0 添加静态路由 首先打开ESXi的SSH服务, 在Configuration -> Security Profile -> Services , start SSH 用管理 ...
- vue-router2.0动态路由获取参数
一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"& ...
- 个人Vue-1.0学习笔记
dVue.js是类似于angular.js的一套构建用户界面的渐进式框架,只关注视图层, 采用自底向上增量开发的设计. Vue.js的代码需要放置在指定的HTML元素后面. 关于Vue的数据绑定: 例 ...
随机推荐
- 20175208 《Java程序设计》第九周学习总结
20175208 2018-2019-2 <Java程序设计>第九周学习总结 一.教材学习内容总结: 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系 ...
- vue获得当前页面URL动态拼接URL复制邀请链接方法
vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...
- Cesium 学习笔记
Entity API 1,和 fill属性不太一样,outline没有对应的材质配置,而是用两个独立的属性outlineColor和outlineWidth. 注意outlineWidth属性仅仅在非 ...
- Prometheus监控学习笔记之Prometheus从1.x升级到2.x
详细参考这篇文章 https://cloud.tencent.com/developer/article/1171434 prometheus 2.0于2017-11-08发布,主要是存储引擎进行了优 ...
- Spark大型电商项目实战-及其改良(3) 分析sparkSQL语句的性能影响
之前的运行数据被清除了,只能再运行一次,对比一下sparkSQL语句的影响 纯SQL的时间 对应时间表 th:first-child,.table-bordered tbody:first-child ...
- Linux的文件系统
根文件系统(rootfs): root filesystem LSB, FHS: (FileSystem Heirache Standard) /etc, /usr, /var, /root, /ho ...
- Gradle构建多模块项目
通常我在使用Maven构建项目的时候是将应用项目划分为多个更小的模块. Gradle 项目也拥有多于一个组件,我们也将其称之为多项目构建(multi-project build). 我们首先创建一个多 ...
- Got error on conf /etc/mha/app1.cnf: Parameter name master_ip_failover_scrip is invalid!
问题: [root@db03-53 ~]# masterha_check_repl --conf=/etc/mha/app1.cnf Tue Apr 2 20:24:58 2019 - [warnin ...
- npm install
npm install moduleName 命令 1. 安装模块到项目node_modules目录下.2. 不会将模块依赖写入devDependencies或dependencies 节点.3. 运 ...
- 自动化测试系列:将常用的Android adb shell 命令行封装为C#静态函数
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:adb命令是常用的Android命令行,自动化.代码调试.手工排查问题都会用的到,这里将常用的一些命令行封装 ...