vue2.0 vue-router学习笔记
来源:互联网 发布:10个点的税怎么算法 编辑:程序博客网 时间:2024/06/05 04:55
最近在学习vue.js 2.x。vue-router是其中十分重要的一部分。
在以前的学习中,用过很多后端的路由,比如在laravel框架中,路由的功能是根据前端不同的URL请求,根据路由匹配将请求分发到不同的中间件、方法等。而vue-router是一个前端路由,即是根据不同的路径来决定该加载什么组件。
vue-router的安装:如果在初始化vue-cli的时候,安装了vue-router,就不用重复安装。如果未安装,切换至项目目录下,输入npm install vue-router --save,安装完成。
vue-router的使用:
第一步、首先需要引入并使用该全局组件。如下:
import Router from 'vue-router'Vue.use(Router)第二步、初始化router实例、如下:
let router= new Router({mode: 'history', routes: [ { path: '/', component: IndexPage }]})mode有'hash'和'history'两种,和后端配置有关,默认为hash。routes是一个由path(路径),component(要加载的组件)为键的对象所组成的数组。(注意是routes)
第三步、router的使用。
在需要使用路由的组件中,加入router,如下:
new Vue({ el: '#app', router,//es2015的写法,等同于router:router template: '<Layout/>', components: { Layout }})在使用该路由的组件中,使用<router-view></router-view>这个内置组件来装载需要加载的组件,实际效果是该内置组件会被替换成为路由所匹配的组件,如上的<Indexpage></Indexpage>。
同样,如果需要使用类似于href的链接来进行页面间的跳转(实际为加载不同的组件),可以使用<router-link></router-link>内置组件,该组件需要绑定属性,v-bind:to={path:'xxxx'}(简写为:to={path:'xxxxxx'})。
第四步:路由子节点
在实际使用时,路由是多层的,例如访问/detail路径时,加载到一个详情界面,而/detail/apple需要跳转到苹果的详情,/detail/orange需要跳转到橘子的详情。
vue-router的解决方式是建立路由的子节点,如下:
routes: [ { path: '/detail', component: DetailPage, children: [ { path: 'apple', component: ApplePage }, { path: 'orange', component: OrangePage } ] } ]同样,在DetailPage这个组件中需要使用<router-view></router-view>这个组件来加载不同的组件。(注意:子节点中的path应该为相对路径,不需要加/)。
第五:路由重定向
比如在设计用户登录模块时,如果用户未登陆的状态下访问,需要将用户的访问页面重定向到登陆界面。如下设置路由:
routes: [ { path: '/detail', redirect: '/login' , } ]在访问/detail时,会重定向跳转到/login。
如有不正确的,希望各路大神指正
阅读全文
1 0
- vue2.0 vue-router学习笔记
- vue2.0路由--vue-router
- vue2.0,vue-router配置
- vue2.0使用vue-router
- Vue2.0配置vue-router
- vue-router 学习笔记
- vue学习笔记:vue-router
- Vue2.0 + vue-router + Vuex实战演练
- Vue2.0 框架配置:vue-cli + vue-router + vuex
- vue2.0+vue-cli+webpack+vue-router中路由设定
- Vue2.0 框架配置:vue-cli + vue-router + vuex
- vue之vue-router vuex学习笔记
- Vue2.0+vue-router实现简易豆瓣电影webApp
- 使用vue2.0 vue-router vuex 模拟ios7操作
- 搭建vue2.0+vuex+vue-router+babel+webpack环境
- vue2.0中.vue文件页面跳转之.$router.push
- vue2.0之.vue文件之间$router传值
- 使用vue2.0 vue-router vuex 模拟ios7操作
- github pull常见用法
- 命令02
- Vim配置重写脚本利于开发
- 解决安装ubuntu系统时,出现机器以UEFI模式启动了安装器的问题
- C#由汉字获取拼音或者首字母的帮助类
- vue2.0 vue-router学习笔记
- effective C++条款四十五解读
- head first python 菜鸟的问题
- redis命令:info 的简单介绍
- 25匹赛马,没有秒表,五条跑道。用最少的比赛场次找出三匹跑得最快的马。过程分析
- php跳转之后session被清空,session怎么都存不上
- input 标签的监听事件总结
- resolv.conf文件
- 《剑指Offer》代码笔记目录