vue面试题（一）

1.active-class是哪个组件的属性？嵌套路由怎么定义

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换。

当routerlink标签被点击时将会应用这个样式 使用有两种方法：

--routerLink标签内使用

<router-link to='/' active-class="active" >首页</router-link>

--在路由js文件,配置active-class

<script>
    const router = new VueRouter({
        routes,
        linkActiveClass: 'active'
    });
</script>
<script>
    const router = new VueRouter({
        routes,
        linkActiveClass: 'active'
    });
</script>

在使用时会有一个Bug：首页的active会一直被应用

解决办法：为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

--在router-link中写入exact

 <router-link to='/' active-class="active" exact>首页</router-link>

--在路由js文件,配置active-class

<script>
    const router = new VueRouter({
        routes,
        linkExactActiveClass: 'active'
    });
</script>

2.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

可以通过query ,param两种方式

区别: query通过url传参，刷新页面还在    params刷新页面不在了

params方式:

• 配置路由格式:/router/:id
• 传递的方式:在path后面跟上对应的值
•  传递后形成的路径:/router/123

<!-- 动态路由-params -->
 
//在APP.vue中
    <router-link :to="'/user/'+userId" replace>用户</router-link>    
 
//在index.js
     {
    path: '/user/:userid',
    component: User,
    },

跳转方法:

// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})
// 方法3：
this.$router.push('/user/' + wade)

可以通过$route.params.userid 获取你说传递的值

 query的类类型

•   配置路由格式:/router,也就是普通配置
•   传递的方式:对象中使用query的key作为传递方式
•   传递后形成的路径:/route?id=123

<!--动态路由-query -->
//01-直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',quer