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 ...
随机推荐
- python 获取视频文件的大小，时长等
举例说明: import os import sys import xlwt from moviepy.editor import VideoFileClip file_dir = u"G: ...
- struts2：在Action中使用Servlet的API，设置、读取各种内置对象的属性
有两种方式可以实现在Action中使用Servlet的API.一种是使用org.apache.struts2.ServletActionContext类,另一种是使用com.opensymphony. ...
- 解决 slf4j + log4j 在云服务上打印乱码
由于云服务器的环境是纯英文的 虽然在eclipse中可以打印日志显示中文,但是实用putty的时候查看却是乱码,下载日志也同样是乱码 那么只要设置utf-8即可
- Web Component探索
概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...
- 深入理解Java中的逃逸分析
在Java的编译体系中,一个Java的源代码文件变成计算机可执行的机器指令的过程中,需要经过两段编译,第一段是把.java文件转换成.class文件.第二段编译是把.class转换成机器指令的过程. ...
- Java套接字Socket编程--TCP参数
在Java的Socket中,主要包含了以下可设置的TCP参数. 属性 说明 默认值 SO_TIMEOUT 对ServerSocket来说表示等待连接的最长空等待时间; 对Socket来说表示读数据最长 ...
- UNIX环境高级编程 apue.h头文件的配置
http://jimslinbing.blog.163.com/blog/static/85054319201292712414518/ 1.到http://www.apuebook.com下载源码2 ...
- Python3之pymysql导入mysql
$cat insert.py #!/usr/bin/python # -*- coding: UTF-8 -*- import os import sys import datetime import ...
- LeetCode: Maximum Subarray 解题报告
Maximum Subarray Find the contiguous subarray within an array (containing at least one number) which ...
- LeetCode: Binary Tree Postorder Traversal 解题报告
Binary Tree Postorder Traversal Given a binary tree, return the postorder traversal of its nodes' va ...