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 check box 自定义图片
http://blog.csdn.net/competerh_programing/article/details/7417074
- Oozie4.2 安装部署、以及example测试
编译: 使用的环境是:Hadoop2.6.0.Spark1.4.0.Hive0.13.1.Sqoop1.4.4 编译Oozie的命令:./mkdistro.sh -Phadoop-2 -Dhadoop ...
- xcode6 怎样下载ios7模拟器
1. 怎样下载ios7模拟器 点击xcode.选择"Preferences".选择"downloads",就能够看见IOS 7.1,只是下载有点慢. 2. 怎样 ...
- tensorflow省钱方案-ml-engine
google cloud有专门的ml-engine(machine learning engine)模块,可以直接用来跑tensorflow,不用像虚拟机一样开关机.只需要根据需要指定配置就行.收费分 ...
- Vue2.0 v-for 中 :key 的作用
- css3实现画对号动画
目标:实现对号动画,慢慢画出来的感觉: 原理:外层div的背景是一个对号图片,用一个div做遮罩,让遮罩div层从左到右做运动一次即可实现动画,需要注意的是遮罩div的初始位置应该在外层div的外面: ...
- Golang IO包的妙用
Golang 标准库对 IO 的抽象非常精巧,各个组件可以随意组合,可以作为接口设计的典范.这篇文章结合一个实际的例子来和大家分享一下. 背景 以一个RPC的协议包来说,每个包有如下结构 type P ...
- C++编程学习50个经典网站 强力推荐(转载)
转自:http://blog.csdn.net/microzone/article/details/6684436 C/C++是最主要的编程语言.这里列出了50名优秀网站和网页清单,这些网站提供c/c ...
- FLINK SQL Calcite原理
http://wuchong.me/blog/2017/03/30/flink-internals-table-and-sql-api/ https://cloud.tencent.com/devel ...
- nginx 并发数问题思考：worker_connections,worker_processes与 max clients
我相信,很多人都跟我一样,看书都不会太细致也不太认真思考,感觉书中讲的东西都应该是对的,最近读书时我发现以前认为理所当然的东西事实上压根都没有弄明白,最终的结果是,书是别人的,书中的知识也是别人的. ...