使用vue.js路由后失效

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的)附上部分代码<!DOCTYPE html><html><head><meta charset="

Eve慕

5022人浏览 · 2017-04-10 20:29:18

Eve慕 · 2017-04-10 20:29:18 发布

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的)

附上部分代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">

</head>
<style>
body {
  margin: 0;
  padding: 0;
}
.logo {
  width: 166.65px;
  height: 60px;
  position: absolute;
}

.el-menu-demo {
  margin-left: 166.65px;
}
.tac {
  width: 500px;
} 
.bar2,.bar3{
  display: none;
}


</style>
<body>

<div id="top-menu">
  <div class="logo">
    <img src="baidu.gif" alt="">
  </div>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1" class="nav1">基本资料</el-menu-item>
    <el-menu-item index="2" class="nav2">培养信息</el-menu-item>
    <el-menu-item index="3" class="nav3">考核相关</el-menu-item>
    <el-menu-item index="4" class="nav4">清算</el-menu-item>
  </el-menu>
</div>
<div id="left-menu">
<el-row class="tac">
  <!-- 基本资料-->
  <el-col :span="8" class="bar1">
    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" @select="handleSelect" theme="dark">
      <el-menu-item-group title="个人资料">
      <!-- 路由链接添加处 -->
        <router-link to = "/information"><el-menu-item index="1"><i class="el-icon-message"></i>基本信息</el-menu-item></router-link>
        <el-menu-item index="2"><i class="el-icon-message"></i>修改密码</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="会员资料">
        <router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>会员信息</el-menu-item></router-link>
      </el-menu-item-group>
      <el-menu-item-group title="小组资料">
        <el-menu-item index="4"><i class="el-icon-message"></i>小组信息</el-menu-item>
      </el-menu-item-group>
    </el-menu>
  </el-col>
 </el-row>
<!-- 路由内容显示 -->
<div class = "content">
  <router-view></router-view>
</div>
</div>

</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".nav1").click(function(){
      $(".bar1").show().siblings().hide();   
    })
    $(".nav2").click(function(){
      $(".bar2").show().siblings().hide();    
    })
    $(".nav3").click(function(){
      $(".bar3").show().siblings().hide();
    })

  })
  </script>
  <script type="text/javascript">

//vue组件部分
  var Main = {

      data() {
        return {
          activeIndex: '1'
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          /*console.log(key, keyPath);*/
        }
      }
    }

//vue路由部分
    const Information = {template:'<div>foo</div>'}
    const List = {template:'<div>list</div>'}

    const routes = [
    {path:'/information',component:Information},
    {path:'/list',component:List}]
    const router = new VueRouter({
      routes
    })

   const app = new Vue({
      router
    }).$mount('#left-menu') //路由 启动应用

    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#top-menu')

    //主要就是下面这条语句多余 这是写组件时启动应用所用的语句
    //new Ctor().$mount('#left-menu')

  </script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^