发表于: 2020-09-22 22:30:18

0 2145


今天完成的是事情:

看vue的知识,为小项目做准备

明天计划的事情:

看书使我快乐

收获:


前端路由规则

1、URL的hash

URL的hash也就是锚点(#),本质上是改变window.location的href属性,我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新

2、HTML5的history模式

History接口是HTML5新增的,它有五种模式改变URL而不刷新页面

 

History.go(-1)返回上一页

History.back()等价于history.go(-1);

History.forward()等价于history.go(1);

vue全局变量和Vue.prototype

 

对一个vue脚手架项目来说,在main.js里使用vue.prototype声明的变量,实际上是为Vue对象添加了一个原型属性,而不是一个全局变量。但是如果这个原型属性的值是引用类型的,我们就可以借此实现全局变量。

当你在main.js里声明了vue,prototype.a=1后,因为你的每一个vue组件都是一个vue对象的实例

$的原因是一个简单的约定,会避免和已被定义的数据、方法、计算属性产生冲突



vue-router基本使用

1、认识vue-router

Vue-router是vue的官方路由插件,他和vue是深度集成的,适合用于构建单页面应用

vue-router是基于路由和组件,路由用于设定访问路径,将路径和组件映射起来;在vue-router的单页面应用中,页面的路径的改变就是组件的切换

2、安装router

开始默认的是history模式

3、路由的使用

Vue.use()--使用插件

Import  vueRouter from ‘vue-route’

Vue.use(vueRouter) //导入路由对象, 且给当前应用下所有的组件都注入 $router and $route 对象

4、router.go()

这个方法的参数是一个整数,意思实在history记录中向前或者后退多少步


5、操作history

你也许注意到router.push、router.replace和router.go跟window.history.replaceState和window.history.go很像

6、路由传参

Params传参

在url中显示

在{ path:/ / :参数},然后利用to=‘/ /参数’传送,获取参数:{this.$router.params.参数}

不在url中显示

在{path:, name: }给路由命名,传参:to=“{name: ,parmas:参数}”,获取:{this.$router.params.参数}

Query传参

7、防止路由跳转点击过多报错

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

    return originalPush.call(this, location).catch(err => err)

}

我也不清楚啥原理的


遇到的问题:

越看越发现理论知识薄弱


返回列表 返回列表
评论

    分享到