seo vue 动态路由_vue知识总结vue-resourcevue-路由promise-异步

1.mvvm

m:module,

v:view

vm:viewmodule

2.vue,react,angular的区别

vue,react

数据驱动，组件化，

vue,angular:双向绑定

vue,react,angular:虚拟dom

angular:模块化开发。

react:mvc

vue,angular:mvvm

angular:有脏检查。

3.v-show和v-if

v-show:改变的是css,控制显示与隐藏

v-if：是否渲染dom，控制显示与隐藏。

4.在vue中引入插件，

import …from

…

vue.use(”);

5.列举常用的生命钩子。

6.简述vuex的工作原理和使用方法。

生命钩子专题

1.第一次页面加载会触发哪几个钩子？

beforeCreate,created,beforemount,mounted.

2.DOM 渲染在

哪个周期中就已经完成？

mounted

3.简单描述每个周期具体适合哪些场景？

beforecreat:加载一个loading事件。

created:初始化完成事件。比如结束loading,异步请求。

mounted :

挂载元素，获取到DOM节点

updated :

如果对数据统一处理，在这里写上相应函数

beforeDestroy

: 比如删除一个地址。

4.传递参数

父子传参：

父组件传递数据给子组件

父组件数据如何传递给子组件呢？可以通过props属性来实现；

props接收2种类型：

1.数组；

2.对象。

slot:插槽，也可以向子组件传递数据。

子父传参：

使用emit方法。调用父级定义好的@方法，使用on事件监听

非父子组件传参：

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

let Hub = new Vue(); //创建事件中心组件1触发：

<div @click="eve">methods: {

eve() {

Hub.$emit('change','hehe'); //Hub触发事件

}

}

组件2接收:

created() {

Hub.$on('change', () => { //Hub接收事件

this.msg = 'hehe';

});

}

http://blog.csdn.net/binginsist/article/details/68941772作为参考

非父子组件间触发事件：

在a页面自定义事件,@my-event=“onClickEvent”

在b页面@click=”emitMyEvent”

在methods中定义emitMyEvent:{

this.$emit(‘my-event’,this.hello)

}

5.computed

和methods的异同：

同：2个的执行再某些情况下的执行结果一样。

异：

计算属性的更新根据其他值的变化而更新，如果其他值不变，则计算属性则不再变化。

methods方法则是每次都去获取最新的值。

写法上的区别是computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()

两种方式在缓存上也大有不同，利用computed计算属性是将

content与message绑定，只有当message发生变化时才会触发content，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式

methods: {

now:function(){

returnDate.now()

}

}

如果用computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now。

6.keep-alive:

有缓存的作用，提高加载速度。

异步请求插件。

类似jquery的ajax

前端路由的优点缺点

优点：

用户体验好，不需要每次都从服务器全部获取，快速展现给用户

缺点：

不利于seo

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

单页面无法记住滚动的位置。无法在前进，后退的时候技术滚动的位置。

vue-router用来构建spa

router-link,  router-view

动态路由匹配

嵌套路由

编程式路由

命名路由和命名视图

动态路由匹配：

export default new Router({

mode:’history’,

routes: [

{

path:’/goods/:goodsId/user/:name’,

name:’GoodsList’,

component:GoodsList

}

]

})；

解决vue router使用 history 模式刷新后404问题

因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。

想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL

匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

也就是在服务端修改404错误页面的配置路径，让其指向到index.html。

警告：

因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html

文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

1

2

3

4

5

6

const router =newVueRouter({

mode:'history',

routes:

[

{

path:'*',

component: NotFoundComponent }

]

})

如此便解决了页面刷新后404问题。

问题延伸：

但是后面又发现，在IE浏览器下刷新仍然还是404，在网上找了一下原因，是因为IE自作聪明，对错误页面的处理在ie来看页面大小<1024b

会被认为十分不友好，所以ie就将改页面给替换成自己的错误提示页面了，而我的index.html刚好只有一个DIV：

1

2

3

4

5

6

7

8

9

10

11

"utf-8">

"app">

解决办法就是充实一下页面,让大小超过1024即可。

嵌套路由

export default new Router({

mode:’history’,

routes: [

{

path:’/goods/:goodsId/user/:name’,

name:’GoodsList’,

component:GoodsList,

children: [{

path:’title’,

name:’title’,

component:title

}]

}

]

})

编程式路由

通过js来实现页面的跳转

$router.push(‘name’);

$router.push({path:’name’})

$router.push({path:’name?a=123′})或者$router.push({path:’name’,query:{a:123}})

接收参数形式

1.动态路由传参：

使用$route.params.goodsId

2.使用query传参，

使用this.$route.query.a 来显示传递过来的参数

命名路由和命名视图

给路由定义不同的名字，根据名字进行匹配。

给不同的router-view定义名字，通过名字进行对应组件的渲染。

export default new Router({

mode:’history’,

routes: [

{

path:’/’,

name:’GoodsList’,

components: {

default:goodsList,

title:Title,

img:Img

}

}

]

})