1.关于active-class
- active-class是router-link的属性，用来设置链接激活后的css类名。也可以在全局配置中通过项 linkActiveClass修改。
2.vue-router两种模式
在vue的路由配置中有mode选项，vue默认使用hash。
mode:"hash";
mode:"history";
hash模式
- url地址后加'#'，它后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作
history模式
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
pushState()方法可以改变URL地址且不会发送请求，replaceState()方法可以读取历史记录栈，还可以对浏览器记录进行修改。
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。
vue-router导航钩子
- 全局导航钩子：router.beforeEach、router.afterEach、router.beforeResolve(2.5.0+新增，类似beforeEach)
router.beforeEach((to, from, next) => {
// ...
})
router.afterEach((to, from) => {
// ...
})
- 路由独享钩子beforeEnter
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
- 组件内钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
路由懒加载方式
简单来说就是在写路由规则时，component匹配组件名用import引入组件
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
//等同于
const router = new VueRouter({
routes: [
{ path: '/foo', component:() => import('./Foo.vue') }
]
})
- 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
vue中computed计算属性和watch的区别
- computed计算属性结果会被缓存，除非依赖的属性变化才会重新计算，当做属性来使用
- watch主要用来监听某些特定的数据变化（比如监听路由的变化）从而进行业务逻辑操作（数据不会缓存）
vue组件中data为什么是函数
- data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了
vue组件css部分scoped实现原理
- 通过 Webpack 调用 VueJS 中相应 Loader（postCss） , 给组件HTML模板添加自定义属性 (Attribute) data-v-xxxx, 以及给组件内CSS选择器添加对应的属性选择器 (Attribute Selector) [data-v-xxxx], 达到组件内样式只能生效与组件内HTML的效果
Vue的双向数据绑定原理是什么？
- vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，对视图进行更新。
