vue+element 点击页面内跳转按钮 导航菜单选中

<template>
  <el-menu
    router
    theme="dark"
    :default-active="activeIndex"
    class="el-menu-demo"
    active-text-color="rgb(250,83,83)"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/Material"  >我要找</el-menu-item>
    <el-menu-item index="/Workbench" >工作台</el-menu-item>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: this.$route.path
    };
  },

  watch:{
    ‘$route‘(to,from){
      this.activeIndex=to.path
    }
  },
  mounted(){

  },
  methods: {
    handleSelect(key, keyPath) {
    }
  }
};
</script>

原文地址:https://www.cnblogs.com/aknife/p/12503616.html

时间: 2024-11-09 15:59:17

vue+element 点击页面内跳转按钮 导航菜单选中的相关文章

JS实现页面内跳转

使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: 1 var oneTop = $("#aa").offset().top; 2 jQuery("html", "body").animate({ scrollTop: oneTop }, 0); 经过测试,如果不需要有滑动动画的话,可使用下面的语

5(拓展)-页面内跳转

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面内跳转</title> </head> <body> <h1 id='biaoti01'>标题一</h1> <a href="#biaoti01">标题一</a> <a href="#b

TinyMCE主题的文章目录没法点击页内跳转

我想改一下reacg这个粉嫩博客的配置:TinyMCE主题的文章目录没法点击页内跳转. 小菜鸟,思路:去学习BNDong大神 怀疑是这两个和文章目录有关 Cnblogs-Theme-SimpleMemory/src/script/marvin.nav2.js / $(document).ready(function () { var b = $('body'), c = 'cnblogs_post_body', d = 'sideToolbar', e = 'sideCatalog', f =

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

JS如何实现点击页面内任意的链接均加参数跳转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript"

页面内跳转到相应位置的3种方法

首先设置所需的css和html 设置css .demo{ width: 200px; height: 200px; border: 1px red solid; margin-bottom: 100px; margin-right: 50px; } .btn{ position: fixed; right: 0; top: 20px; background-color: #0000cc; color: #ffffff; } 设置html <div class="demo">

使用JS实现页面内跳转的两种方式

第一种方式是直接使用锚点配合链接标签: <h2 id="h2-anchor">Scroll to here</h2> <a href="#h2-anchor">Jump to H2</a> 现在大多数实现都采用该种方式.但是这种方式没有动画效果,跳转是直接发生的. 第二种方式使用jQuery中的animate方法实现: var target= $('#h2-anchor').offset().top; $('body'

WebView支持特效,页面内跳转(转载!)

1 webView = (WebView) findViewById(R.id.lottery_webview); 2 webView.getSettings().setJavaScriptEnabled(true); 3 webView.getSettings().setLoadsImagesAutomatically(true);//auto load images 4 webView.getSettings().setSupportZoom(false); 5 webView.getSet

gitlab markdown支持页面内跳转

markdown语法: [to_be_link](#id_name) 标题: ## 2.aaa <a name="id_name"></a> 参考: http://stackoverflow.com/questions/3292903/in-markdown-what-is-the-best-way-to-link-to-a-fragment-of-a-page-i-e-some-id