vue-router
FAQ
1 Vue-Router基本介绍
1.1 基本介绍
Vue Router：Vue.js的官方路由管理器
Vue Router+Vue.js 构建单页面应用
路由出口，路由匹配到的组件将渲染在这里
vue-router使用：
定义路由：
const routes = [
{path: '/a', component: A},
{path: '/b', component: B}
]
创建router实例：
const router = new Router({routes})
this.$router 访问路由器
this.$route 访问当前路由
1.2 动态路由匹配
动态路径参数：以冒号开头，后跟参数名
访问动态路径参数： this.$route.params.参数名
响应路由参数的变化：
组件实例复用：
/activityDetail/id1 -> /activityDetail/id2
组件的生命周期钩子不会再被调用
1.3 嵌套路由
children配置参数：
以/开头的嵌套路径会被当作根路径
children中定义的component会被渲染在根组件Layout的<router-view></router-view>中
1.4 路由导航
<router-link to=''></router-link>
相当于<a>标签
js:
this.$router.push(`/url`);
该方法参数实例：
this.$router.push('index')
this.$router.push({path: 'index'})
this.$router.push({name: 'user', params: {userId: 123})
this.$router.push({path: 'user', query:{userId: 123}})
命名路由：
定义：
const routes = [
{path: '/a', name: 'a', component: A},
]
使用：
this.$router.push({name: 'a'})
1.5 重定向
通过路由定义配置来完成：
redirect参数：
2 FAQ
2.1 v-bind
v-bind用于属性绑定
与直接给属性赋值不同的是：v-bind绑定的属性值是动态变化的数据
2.2 TypeError: _self.$scopedSlots.default is not a function
解决方法1：
给两个table各添加一个独立的key属性，来表示这两个元素是独立的，不需要进行复用；
解决方法2:
使用v-show代替v-if
v-show和v-if的区别：
v-if 惰性的，若条件为false则不会渲染；
v-show 不管条件是true还是false都会渲染，渲染是通过改变CSS的display样式；
2.3 mongodb:E11000 duplicate key error collection
问题描述：
mongodb在插入数据时出现id重复的错误
内部原因分析：
同时插入两条数据，导致数据库生成了同一个id值；
外部原因分析：
每次使用同一个变量存储不同的数据，导致数据库认为每次存储的是同一条数据，最终生成同一个id值；
