1.动态路由参数：
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
2.beforeRouteUpdate 导航守卫 (一般情况下验证登录时用到)
beforeEach(to,from,next){}
router,beforeEach(to,from,next){
if(to.name=='login'){
next();
}else if(!getCookie('superAdminFlag')){
next({name:'login'})
return
}
}
3.捕获所有路由
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
4.路由嵌套
const router = new VueRouter({
routes:[{
path:'/user/:id',component:User,
children: [{
path: 'pofil',
component: pofil
}]
}]
})
5.编程式的导航
声明式： <router-link :to></router-link> 像以下写法也可以
编程式： router.push(...)
字符串： router.push('home')
对象： router.push({path:'home'})
命名路由： router.push({name:'home',params:{userid:'112'}})
// 带查询参数，变成 /register?plan=private
router.push({path:'home',query:{plan:'home'}})
router.go(-1) 后退一步
命名式路由
const router = new VueRouter({
routes:[{
path:'/user',
name: 'user',
component:User
}]
})
命名路由: <router-link :to="{name:'user',params:{userId:12}}"></router-link>
编程式： router.push({name:'user',params:{user:122}})
命名视图
<router-view></router-view>
<router-view></router-view>
<router-view></router-view>
嵌套视图
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
重定向redirect
const router = new VueRouter({
routes:[{
path: '/',
redirect: /
}]
})
别名alias：
const router = new VueRouter({
routes:[{
path:'/a',component:'',alias:'/b'
}]
})
2020-09-07
1.生命周期钩子函数
1.beforeCreate 在实例初始化之后，数据观测和event/watcher事件配置被调用此时data,watcher,methods都没有。
2.created：在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
此时 this.$data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。
3.beforeMount：在挂载开始之前被调用，相关的 render 函数 首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined，
页面渲染时所需要的数据，应尽量在这之前完成赋值。
4.mounted：在挂载之后被调用。在这一步 创建vm.$el并替换el，并挂载到实例上。
此时元素已经渲染完成了，依赖于DOM的代码就放在这里吧~比如监听DOM事件。
5.beforeUpdate：$vm.data更新之后，虚拟DOM重新渲染 和打补丁之前被调用。
你可以在这个钩子中进一步地修改$vm.data，这不会触发附加的重渲染过程。
6.updated：虚拟DOM重新渲染 和打补丁之后被调用。
当这个钩子被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！
7.beforeDestroy：实例被销毁之前调用。在这一步，实例仍然完全可用。
实例要被销毁了，赶在被销毁之前搞点事情吧哈哈~
8.destroyed：Vue实例销毁后调用。此时，Vue实例指示的所有东西已经解绑定，所有的事件监听器都已经被移除，所有的子实例也已经被销毁。
这时候能做的事情已经不多了，只能加点儿提示toast之类的东西吧。
注：beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，在服务器端渲染期间不被调用。
2. vuex五个核心
state基本数据,getters从基本数据派生出来的数据this.$store.state.数据,mutations 提交更改数据的方法，同步actions包裹mutations异步 ,moduless模块化
3.子组件向父组件传值
代码
子组件向父组件传值--基本用法
6.computed 计算属性与method方法的区别
computed中的计算属性可以写在method中，区别就是method调用要加（）而computed不用computed中必须要加return
computed里面的方法不是通过事件去触发的，而是当属性（必须是data中的属性）发生改变的时候那么当前函数就会被触发
最大的区别是，computed中有缓存，相同的值会直接拿已经缓存的，提高性能，但是method没有缓存，一样的值还是会重新获取
7.渐进增强和优雅降级之间的不同
渐进增强
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
8.请描述一下cookies，sessionStorage和localStorage的区别？
localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
cookies：每个特定的域名下最多生成的cookie个数有限制
网友评论