vue学习中的一些总结
来源:互联网 发布:测字算命软件 编辑:程序博客网 时间:2024/05/20 08:23
结合项目中的使用,学习vue-router. https://1657413883.github.io/2017/03/18/vue-router总结/
http://www.tuicool.com/articles/J3ArAri
路由的用法
// router.config.jsconst routerConfig = [ { path: ‘/login’, component: resolve => require([‘登录路径.vue’],resolve), meta: {noCheckSession: true} }, { path: ‘/’, component: resolve => require([‘通用的主框架.vue’],resolve), children: [ { path: ‘/team’, name: ‘team’, component: resolve => require([‘对应的路径.vue’],resolve) } , { //其他类似 } ] }]// main.jsimport VueRouter from ‘vue-router’import ConfigRoute from ‘./router.config’Vue.use(VueRouter);const router = { mode: ‘history’, base: __dirname , routes: ConfigRoute, scrollBehavior(to,from,savedPosition){ if(savedPosition){ return savedPosition; }else{ return {x: 0,y: 0} } }} router.beforeEach((to, from, next) => { if(to.matched.some(record => !record.meta.noCheckSession)) { // 这个路由需要auth,检验是否登录了. let isLogin = auth.checkAuth() // console.log(‘need login’, isLogin); if(!isLogin){ // 没有登录,重定向到登录页面 console.error(‘Place login!’) next({ path: ‘/login’, query: { redirect: to.fullPath } }) }else{ next() } }else{ next() }})const app = new Vue({ router }).$mount(‘#app’)
知识点
router-link
- 在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
- 会拦击点击事件,不会重新加载页面.
- router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).
to属性可以绑定name(命名组件),query(带查询参数)
<router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}" class="msg" tag="li"></router-link>
router-view
- router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
- router-view可以通过name属性来渲染对应的component下相应的组件
router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.
<transition name="fade" mode="out-in" key="$route.path"> <router-view></router-view></transition>
路由信息对象
一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)
route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。
路由的滚动行为:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样.(这个功能只在 HTML5 history 模式下可用)
当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。scrollBehavior这个方法返回滚动位置的对象信息.如果返回一个布尔假的值,或者是一个空对象,那么不会发生滚动。如: return {x:0,y:0} // 表示对于所有路由导航,简单地让页面滚动到顶部。 return savedPosion; //表示在按下 后退/前进 按钮时,就会像浏览器的原生表现那样 if (to.hash) { return { selector: to.hash } } // 模拟『滚动到锚点』的行为
产生路由信息对象的行为
1. 组件内的this.$route,$route.watch回调2. route.match(location)的返回值3. 导航钩子的参数: router.beforeEach((to, from, next) => { // to 和 from 都是 路由信息对象 })4. scrollBehavior的参数 const router = new VueRouter({ scrollBehavior (to, from, savedPosition) { // to 和 from 都是 路由信息对象 } })
$route.path: 字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。
$route.params: 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
route.query:一个key/value对象,表示URL查询参数。例如,对于路径/foo?user=1,则有route.query:一个key/value对象,表示URL查询参数。例如,对于路径/foo?user=1,则有route.query.user == 1,如果没有查询参数,则是个空对象。
$route.hash: 当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
$route.fullPath: 完成解析后的 URL,包含查询参数和 hash 的完整路径
$route.matched:一个数组,包含当前路由的所有嵌套路径片段的 路由记录 (包含children下路径)。
$route.name: 当前路由的名称
Router的构造配置: router配置.
mode: 默认值为’hash’,可选值: “hash” | “history” | “abstract”.
1. hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。2. history: 依赖 HTML5 History API 和服务器配置3. abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
base: 默认值为’/‘,表示应用的基路径.如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/“
linkActiveClass: 默认值: “router-link-active”,
scrollBehavior方法
导航钩子
导购钩子:用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
// 全局钩子const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ... // to: Route: 即将要进入的目标 路由对象 // from: Route: 当前导航正要离开的路由 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数 - next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的) - next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 - next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。中断当前导航,然后进行一个新的导航。 })// 单个路由独享的: 在自己的路由里面设置{ path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... }}// 组件内的钩子 - beforeRouteEnter - beforeRouteUpdate - beforeRouteLeave
router实例
router.app: 配置了 router 的 Vue 根实例。
router.mode: 路由使用的 模式。
route.currentRoute: 当前路由对应的 路由信息对象.
route.beforeEach(guard)
route.push() 跳转路由,会向 history 栈添加一个新的记录
等价于<router-link :to="...">router.push({ name: 'user', params: { userId: 123 }})router.push({ path: 'register', query: { plan: 'private' }})
route.replace(): 它不会向 history 添加新记录,替换掉当前的 history 记录。
等价于:<router-link :to="..." replace>
route.go(n):在 history 记录中向前或者后退多少(n)步.类似 window.history.go(n)
route.back()
- route.forward()
异步加载
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件.
// AMD风格component: resolve => require(['登录路径.vue'],resolve)
另附链接:router和route的区别
https://segmentfault.com/a/1190000009392552
- vue学习中的一些总结
- 学习过程中的一些总结
- Ajax学习中的一些总结
- 关于vue的一些总结
- vue.js总结学习
- vue学习总结
- vue学习知识总结
- Vue.js 学习总结
- vue学习总结
- vue学习总结
- vue 学习总结
- vue学习总结1
- vue学习总结2
- 今日学习总结循环中的一些问题
- OC学习过程中的一些总结
- 互联网技术学习中的一些资源总结
- css学习过程中的一些总结
- Android学习中的一些总结(一)
- 三、计算机网络之网际层
- 【matlab】蚁群算法详解
- python requests的方法
- eclipse开发RCP之三
- 程序片段----友元 friend
- vue学习中的一些总结
- new用法详解
- 20170912_字符串比较函数strcmp的实现
- bzoj 1655: [Usaco2006 Jan] Dollar Dayz 奶牛商店(高精度完全背包)
- 四、计算机网络之子网划分和CIDR
- java IO操作 (读写、追加、删除、移动、复制)
- 开始CSDN的新生活
- Ajax提交表单后关闭弹窗,同时加载刷新父类页面
- hdu 5695 拓扑排序(裸题)+优先队列