vue.js 라우팅 사용 후 실패 문제 해결-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

vue.js 라우팅 사용 후 실패 문제 해결

亚连

May 29, 2018 pm 03:51 PM

vue.js라우팅

아래에서는 vue.js 라우팅 사용 후 실패 문제를 해결하는 기사를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue.js에서 라우팅을 새로 배웠고 이전에 작성한 vue 데모(from 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" rel="external nofollow" >
</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>
<p id="top-menu">
 <p class="logo">
 <img src="/static/imghwm/default1.png"  data-src="baidu.gif"  class="lazy"   alt="">
 </p>
 <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>
</p>
<p 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>
<!-- 路由内容显示 -->
<p class = "content">
 <router-view></router-view>
</p>
</p>
</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: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo</p>&#39;}
 const List = {template:&#39;<p>list</p>&#39;}
 const routes = [
 {path:&#39;/information&#39;,component:Information},
 {path:&#39;/list&#39;,component:List}]
 const router = new VueRouter({
 routes
 })
 const app = new Vue({
 router
 }).$mount(&#39;#left-menu&#39;) //路由 启动应用
 var Ctor = Vue.extend(Main)
 new Ctor().$mount(&#39;#top-menu&#39;)
 //主要就是下面这条语句多余 这是写组件时启动应用所用的语句
 //new Ctor().$mount(&#39;#left-menu&#39;)
 </script>
</html>

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사

总结分享几个 VueUse 最佳组合，快来收藏使用吧！Jul 20, 2022 pm 08:40 PM

VueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合，希望对大家有所帮助！

5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库，希望对大家有所帮助！

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图？下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法，希望对大家有所帮助！

Github 上 8 个不可错过的 Vue 项目，快来收藏！！Jun 17, 2022 am 10:37 AM

本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目，都是非常棒的项目，希望当中有您想要收藏的那一个。

如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！

聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！

如何使用VueRouter4.x？快速上手指南Jul 13, 2022 pm 08:11 PM

如何使用VueRouter4.x？下面本篇文章就来给大家分享快速上手教程，介绍一下10分钟快速上手VueRouter4.x的方法，希望对大家有所帮助！

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

Dreamweaver Mac版

시각적 웹 개발 도구

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.