1、route和router区别,query和param区别,vue路由传参的方式
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象
例如history对象。经常用的跳转链接就可以用this.$router.push
route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等
-
router.js 后边跟:id配置参数
-
query 方法传参
router.push({path: 'register', query: {plan: 'private'}})
query传参是针对path的,接收参数: this.$route.query.
-
name 方法传参
router.push({name: 'user', params: {userId: 123}})
params传参是针对name的, 接收参数: this.$route.params.
-
vue自带标签<router-link :to>标签传参
2、路由实现原理
匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容
存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新
解决问题的思路便是在改变 url 的情况下,保证页面的不刷新
前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。
hash 来实现路由
"#"后面 hash 值的变化,
-
hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,并不会导致浏览器向服务器发出请求,不会刷新页面
-
会触发
hashchange
这个事件,可以监听hashchange
来实现更新页面部分内容的操作:
history 模式
HTML5 标准pushState 和 replaceState这两个 API 可以改变 url 地址且不会发送请求。
同时还有popstate
事件实现前端路由,单页路由的 url 就不会多出一个#,变得更加美观。
但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。
为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面
history —— 利用了 HTML5 History Interface 中新增的 pushState()
和 replaceState()
方法。(需要特定浏览器支持)
调用 history.pushState()
相比于直接修改 hash
,存在以下优势:
-
pushState()
设置的新 URL 可以是与当前 URL 同源的任意 URL;而hash
只可修改#
后面的部分,因此只能设置与当前 URL 同文档的 URL; -
pushState()
设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而hash
设置的新值必须与原来不一样才会触发动作将记录添加到栈中; -
pushState()
通过stateObject
参数可以添加任意类型的数据到记录中;而hash
只可添加短字符串; -
pushState()
可额外设置title
属性供后续使用。
-
hash
模式下,仅hash
符号之前的内容会被包含在请求中,如http://www.abc.com
,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。 -
history
模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如http://www.abc.com/book/id
。如果后端缺少对/book/id
的路由处理,将返回 404 错误。
3、vue里的路由钩子
当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化
全局路由钩子:
router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了
console.log('beforeEach')
console.log(to,from)
//
next()
})
//
router.afterEach((to, from) => {
//会在任意路由跳转后执行
console.log('afterEach')
})
单个路由钩子:
只有beforeEnter,在进入前执行,to参数就是当前路由
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
路由组件钩子:
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
4、重定向和别名
重定向:redirect 当用户访问 /a
时,URL 将会被替换成 /b
,然后匹配路由为 /b
const router = new VueRouter({
routes: [
// 从 /a 重定向到 /b
{ path: '/a', redirect: '/b' },
//目标是一个命名的路由
{ path: '/a', redirect: { name: 'foo' }},
//动态返回重定向目标
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名:alias 当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
5. 组件缓存
keep-alive
keep-alive
包裹「动态组件」时,会缓存不活动的组件实例,而不是销毁它们
方案一: 使用内置组件 <component>
。
<keep-alive>
<component :is="view"></component>
</keep-alive>
方案二: 当出现条件判断时的子组件
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
方案三: 结合路由使用时
增加 router.meta 属性
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<keep-alive>
提供了两个属性 include 与 exclude,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>
6、vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等
1、首先安装babel-polyfill,解决ie不支持promise对象的问题
npm install --save-dev babel-polyfill
2、安装成功之后,在main.js第一行引入
import 'babel-polyfill'
3、在webpack.base.config.js中将entry中的app: './src/main.js'配置改为:app: ['babel-polyfill', './src/main.js'];
7、vue 中event使用
需要传递参数,又需要用到 event 对象
$event 传入到回调中解决这个问题
<div id="app">
<button v-on:click="click($event, 233)">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event, val) {
console.log(typeof event); // object
}
}
});
简单总结来说:
- 使用不带圆括号的形式,event 对象将被自动当做实参传入;
- 使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象。
8、vue为什么要求组件模板只能有一个根元素?
当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口:
let vm = new Vue({
el:'#app'
})
同时我们也会在body里面新增一个id为app的div
<body>
<div id='app'></div>
</body>
这很好理解,就是为vue开启一个入口,那我们不妨来想想,如果我在body下这样
<body>
<div id='app1'></div>
<div id='app2'></div>
</body>
Vue其实并不知道哪一个才是我们的入口,因为对于一个入口来讲,这个入口就是一个‘Vue类’,Vue需要把这个入口里面的所有东西拿来渲染,处理,最后再重新插入到dom中。
如果同时设置了多个入口,那么vue就不知道哪一个才是这个‘类’。
二、
当我们在webpack搭建的vue开发环境下,使用单文件组件时,你可能会这样:
<template>
<div class='component'></div>
</template>
那这里为什么template下也必须有且只能有一个div呢?
这里我们要先看一看template这个标签,这个标签是HTML5出来的新标签,它有三个特性:
1.隐藏性:该标签不会显示在页面的任何地方,即便里面有多少内容,它永远都是隐藏的状态;
2.任意性:该标签可以写在页面的任何地方,甚至是head、body、sciprt标签内;
3.无效性:该标签里的任何HTML内容都是无效的,不会起任何作用;
但是呢,你可以通过innerHTML来获取到里面的内容。
知道了这个,我们再来看.vue的单文件组件。其实本质上,一个单文件组件,本质上(我认为)会被各种各样的loader处理成为.js文件(因为当你import一个单文件组件并打印出来的时候,是一个vue实例),通过template的任意性我们知道,template包裹的HTML可以写在任何地方,那么对于一个.vue来讲,这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容,导致结果又回到了开始 :既然一个.vue单文件组件是一个vue实例,那么这个实例的入口在哪里?
如果在template下有多个div,那么该如何指定这个vue实例的根入口?
为了让组件能够正常的生成一个vue实例,那么这个div会被自然的处理成程序的入口。
通过这个‘根节点’,来递归遍历整个vue‘树’下的所有节点,并处理为vdom,最后再渲染成真正的HTML,插入在正确的位置
那么这个入口,就是这个树的‘根’,各个子元素,子组件,就是这个树的‘枝叶’,而自然而然地,这棵‘树’,就是指一个vue实例了。
9、 Vue 组件 data 为什么必须是函数?
首先看个例子
new Vue({
el: '#app',
template: `<div>{{demo}}</div>`,
data: {
demo: 123
}
})
在new vue()中,data可以直接是一个对象,为什么在vue组件中,data必须是一个函数呢?
我们大致可以通过js原型链
来对比下:
var Component = function() {};
Component.prototype.data = {
demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456
从上面可以看出,两个实例都引用同一个对象,其中一个改变的时候,另一个也发生改变。
每一个vue组件都是一个vue实例,通过new Vue()实例化,引用同一个对象,如果data直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变。
而data是函数的话,每个vue组件的data都因为函数有了自己的作用域,互不干扰。
10、深度监听数据
1.借助deep: true深度监听
watch: {
obj: {
// 数据变化时执行的逻辑代码
handler(newName, oldName) {
console.log('obj.a changed');
},
// 开启深度监听
deep: true
}
}
watch监听对象,同时用deep: true深度监听,此时只有对象中的某个值发生改变就会触发
2.借助computed计算属性监听
// 通过计算属性,计算出需要监听的数据
computed: {
changed: function () {
return this.obj.changed
}
},
// 不通过deep,仍然可以深度监听计算出来的数据
watch: {
changed: function () {
console.log(this.changed)
}
}
通过computed计算属性的配合,先计算出需要监听的属性后用watch监听
11、过度组件
Vue提供了 transition 的封装组件,在下面四种情形下,可以给任何元素和组件添加entering/leaving过度
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
12. vue项⽬性能优化
vue如何优化⾸屏加载速度?
将引⽤的外部js、css⽂件剥离开来,不编译到vendor.js中,⽽是⽤资源的形式引⽤(如CDN资源),
这样浏览器可以使⽤多个线程异步将vendor.js、外部的js等加载下来,达到加速⽬的。
⼏种常⽤的优化⽅法:
- ⼤⽂件定位:webpack可视化插件Webpack Bundle Analyzer 查看⼯程js⽂件⼤⼩
2.按需加载
路由懒加载
图⽚懒加载v-lazy
UI库
-
将打包⽣成后 index.html⻚⾯ ⾥⾯的JS⽂件引⼊⽅式放在 body 的最后
使⽤html-webpack-plugin插件,将inject的值改为body
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve) }
<img v-lazy="'/static/img/abc.jpg'">
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
inject:'body'
}) -
⽤⽂档的cdn⽂件代替 npm 安装包
打包时,把vue、vuex、vue-router、axios等,换⽤国内的bootcdn直接引⼊到根⽬录的
index.html。 在webpack设置中添加externals,忽略不需要打包的库
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
}
在index.html中使⽤cdn引⼊
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js">
</script> <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
去掉原有的引⽤,否则还是会打包
//去掉import,如:
//import Vue from 'vue'
//import Router from 'vue-router'
- 代码包优化
对项⽬代码中的JS/CSS/SVG(*.ico)⽂件进⾏gzip压缩
屏蔽sourceMap
6.代码优化
功能重复组件和函数封装,提⾼代码复⽤率
尽量减少本地存储的使⽤
减少watch使⽤, v-if 和 v-show选择使⽤
为item设置唯⼀key值
细分vuejs组件
7.⽤户体验优化
添加loading
better-click防⽌iphone点击延迟
⻣架屏加载
网友评论