vue-router

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的中

1.4 路由导航

相当于标签

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值；