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 ...
随机推荐
- oozie 常用命令
1.验证wokflow.xmloozie validate /appcom/apps/hduser0401/mbl_webtrends/workflow.xml 2.提交作业,作业进入PREP状态 o ...
- jquery 获取URL参数并转码的例子
通过jquery 获取URL参数并进行转码,个人觉得不错,因为有时不转码就会有乱码的问题.jquery 获取URL参数并转码,首先构造一个含有目标参数的正则表达式对象,匹配目标参数并返回参数值代码: ...
- APACHE LOG4J™ 2
最近服务端开发需要用Log系统,于是研究了下APACHE下的Log框架. 目前日志系统,支持的语言有C++,PHP,.NET,JAVA.当然我是用Java服务端,选择用log4j吧.但突然发现log4 ...
- （原创）c++11改进我们的模式之改进单例模式
我会写关于c++11的一个系列的文章,会讲到如何使用c++11改进我们的程序,本次讲如何改进我们的模式,会讲到如何改进单例模式.观察者模式.访问者模式.工厂模式.命令模式等模式.通过c++11的改进, ...
- 【硅谷问道】Chris Lattner 访谈录（上）
[硅谷问道]Chris Lattner 访谈录(上) 话题 Chris Lattner 是谁? Xcode 的编译器 LLVM 背后有怎样的故事? Swift 诞生的前世今生,封闭的苹果为何要拥抱开源 ...
- visual studio 2005提示脚本错误 /VC/VCWizards/2052/Common.js
今天在做OCX添加接口的时候,莫名其妙的遇到visual studio 2005提示脚本错误,/VC/VCWizards/2052/Common.js. 网上找了很多资料,多数介绍修改注册表“vs20 ...
- Spring boot下添加filter
https://www.cnblogs.com/OnlyCT/p/7133639.html ****************************************************** ...
- spring boot spring cache ehcache3.x整合
http://blog.csdn.net/qq18998401056/article/details/53467671 **************************************** ...
- 【转】Mysql千万级数据表结构修改
当需要对表进行ddl操作如加索引.增删列时,数据量小时直接在线修改表结构影响不大当表达到百万.千万数据就不能直接在线修改表结构 下面是具体的过程:1.备份数据select * from ih_orde ...
- 九章面试题：Find first K frequency numbers 解题报告
Find first K frequency numbers /* * Input: int[] A = {1, 1, 2, 3, 4, 5, 2}; k = 3 * return the highe ...