vue.js - 使用Vue-router 通过地址栏输入回车之后想调用自定义的方法，应该写在什么里面

问题描述

问 题

这是个spa 想实现通过地址栏点击回车然后对应导航条item 的class 变成active

• 普通的页面写死这个class就行了 spa怎么解决。 有好的解决方法可以直接跳过 回复答案就行了。

• 我的方法是每个item 都使用 v-bind绑定is-active这个class

• 然后在下面的showActive()方法中传入输入的path 在改变绑定的routeClass的bool值

created:function(){
      this.showActive(this.$route.path)
    },
  methods:{ showActive(path){
        if(path == '/')
          this.routeClass.index = true
        else if(path == '/login')
           this.routeClass.login = true
        else if(path =='/video' || path =='/file' || path =='/comments')
        this.routeClass.select = true    
      }
    }
    

• 由于写在了created 里面，第一次通过url 然后点击回车进来的时候，class可以加上。但是由于组件已经加载好了 created钩子不会再调用了 如何解决这个问题呢？或者有更好的添加class的方法推荐给我

解决方案

建议使用vue-router。我看你这段代码感觉你是想自己构建路由系统，但是需知道自己造的轮子问题多多，社区里面的资源应该用起来。
vue-router 会提供一个this.$route对象，这个对象包括地址栏的一些信息，这些信息决定了你那些按钮应当是激活状态的。
你代码的思路基本是正确的，使用vue-router就没那么多麻烦。
————————
上面回答有欠考虑，以下正解

<template>
    <el-menu :default-active="defaultActive">
        <el-submenu>
            <template slot="title"><i class="el-icon-message"></i>素材管理</template>
            <el-menu-item index="MenuOne">MenuOne</el-menu-item>
            <el-menu-item index="MenuTwo">MenuTwo</el-menu-item>
            <el-menu-item index="MenuThree">MenuThree</el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>
    export default{
        data(){
            return {
                defaultActive:this.$route.name
            }
        }
    }
</script>

this.$route.name 或者用this.$route.path都同一个原理，个人习惯用name

这篇关于vue.js - 使用Vue-router 通过地址栏输入回车之后想调用自定义的方法，应该写在什么里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！