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 ...
随机推荐
- 微信小程序实现给循环列表添加点击样式实例
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...
- nginx 配置http重定向到https
在80端口的那个server下,添加如下: server_name www.youwebsite.com youwebsite.com; rewrite ^(.*)$ https://$host$1 ...
- IOS之Accessor method
1 前言 本章主要介绍了Objective-C中的存取方法的相关概念. 2 详述 存储方法是一个可以获得或者设置一个对象的属性值的实例方法.在Cocoa的术语中,一个检索对象属性值的方法提及为gett ...
- distinct aggregation
https://docs.google.com/document/d/1zj6OA-K2hi7ah8Fo-xTQB-mVmYfm6LsN2_NHgTCVmJI/edit# https://issues ...
- tcp拥堵算法
http://m.blog.csdn.net/article/details?id=6739189
- 乐观锁的一种实现方式—CAS
线程安全 众所周知,Java是多线程的.但是,Java对多线程的支持其实是一把双刃剑.一旦涉及到多个线程操作共享资源的情况时,处理不好就可能产生线程安全问题.线程安全性可能是非常复杂的,在没有充足的同 ...
- latex基本语法
一直想着学会latex,但是自学起来太麻烦,总是出现各种不理解的错误,也没那么多时间钻研,就学了忘,忘了再学,这里就先摘录下它的基本命令吧.学好了是一件利器!(虽然不常用,但要尽量学会) LaTex基 ...
- CSS中Zen Coding
值别名 有几个常用的别名: p → % e → em x → ex 可以用这些别名来代替完整的单位: w100p → width: 100% m10p30e5x → margin: 10% 30em ...
- Centos crontab定时任务
CRONTAB是一个用于设置周期性被执行的任务的工具,有了它,我们就可以从定时工作中解放出来. 一 : 检查CRONTAB服务 1. 检查CRONTAB工具是否已经在主机上安装 : crontab - ...
- ffmpeg与H264编码指南
注:本文属于转载译文,原文地址:http://blog.csdn.net/vblittleboy/article/details/8982857. 英文地址:https://trac.ffmpeg.o ...