Vue路由学习笔记
Vue路由大致分为6个步骤：
1.引用vue-router
<script src="js/vue-router.js"></script>
2.安装插件
Vue.use(VueRouter);
3.创建一个路由对象
var router = new VueRouter({
//这里面配置路由对象
});
4.配置路由对象
component:指定要更换的组件
routes:[
{name:'***',path:'***',component:***}
]
5.将配置好的路由关联到vue实例中
router:router,
6.指定路由改变局部的位置
<!DOCTYPE html>
<html lang="en"> <head>
<title>router-link</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<!-- 1.引用vue-router -->
<script src="js/vue-router.js"></script>
<script>
var Login = {
template:`<div>我是登录页面</div>`
} var Register = {
template:`<div>我是注册页面</div>`
} // 2.安装插件
Vue.use(VueRouter); // 3.创建一个路由对象
var router = new VueRouter({
// 4.配置路由对象
routes:[
//对象有了name就等于有了变量名,第6步中router-link 只需要通过 :to={anme:'变量名'} 就可以了
{name:'login',path:'/login',component:Login},
{name:'register',path:'/register',component:Register}
]
}); //6.指定路由改变局部的位置
var App = {
template:`
<div>
<router-link to="/login">登录</router-link>
<router-link :to="{ name:'login' }">登录</router-link>
<router-view></router-view>
</div>
`
} //5.将配置好的路由关联到vue实例中
var vm = new Vue({
el: '#app',
router:router,
components: {
app:App
},
template:`<app></app>`
});
</script> </body> </html>
Vue路由学习笔记的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发
所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...
- vue视频学习笔记06
video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...
- vue视频学习笔记
video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- vue.js路由学习笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 关于android fragment 某些使用记录
1.首先是当android2.3.3之前还是用着android-support-v4.jar来加载Fragment时. a.在xml布局应该如何定义呢? 答案:用FrameLayout标签来定义(在a ...
- C#中计算时间差
问题: startTime = DateTime.Now; -----------slExecutedTime.Text = (DateTime.Now - startTime) ...
- pc客户端网页录音和压缩
web录音的功能,也就是怎么使用 getUserMedia 音频上传 栗子中最后返回的是Blob数据 return new Blob([dataview], { type: type }) 因为对ht ...
- TCP/IP 三次握手，温故知新
今天看网络编程.又又一次看了一遍三次握手.曾经只知道连接有三次握手.今天发现原来断开也有三次握手. 三次握手:指通信两方彼此交换三次信息. 三次握手是在存在数据报丢失.反复和延迟的情况下,确保通信两方 ...
- Android4.42-Settings源代码分析之蓝牙模块Bluetooth总体实现（总）
本文为博主原创,转载请注明出处:http://blog.csdn.net/zrf1335348191/article/details/50995466 蓝牙相关代码已在另两篇文章中介绍,有须要的能够查 ...
- django rest_framework入门五-认证和权限
1.django User实体 django自带了用户验证模块,django/contrib/auth/models.py定义了用户实体,代码如下: class AbstractUser(Abstra ...
- springboot+sqlite+maven+mybatis
https://blog.csdn.net/u012343297/article/details/79163977 ****************************************** ...
- RelativeLayout.LayoutParams
通过id设置相对兄弟元素对齐. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- Android MPAndroidChart LineChart 显示数据格式化
最近帮助同学,使用MPAndroidChart 控件,在图表显示时候, class MyValueFormatter implements IValueFormatter { @RequiresApi ...
- 移动web开发（二）——viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...