vue.js 라우팅 실패를 처리하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

vue.js 라우팅 실패를 처리하는 방법

php中世界最好的语言

Jun 15, 2018 pm 03:55 PM

vue.js 라우팅

이번에는 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="baidu.gif" 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: '1'
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:'<p>foo</p>'}
 const List = {template:'<p>list</p>'}
 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>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7432

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

Slim 프레임워크에서 API 라우팅을 구현하는 방법 Aug 02, 2023 pm 05:13 PM

Slim 프레임워크에서 API 라우팅을 구현하는 방법 Slim은 웹 애플리케이션을 구축하는 간단하고 유연한 방법을 제공하는 경량 PHP 마이크로 프레임워크입니다. 주요 기능 중 하나는 API 라우팅 구현으로, 이를 통해 다양한 요청을 해당 핸들러에 매핑할 수 있습니다. 이 기사에서는 Slim 프레임워크에서 API 라우팅을 구현하는 방법을 소개하고 몇 가지 코드 예제를 제공합니다. 먼저 Slim 프레임워크를 설치해야 합니다. 최신 버전의 Slim은 Composer를 통해 설치할 수 있습니다. 터미널을 열고

Java Apache Camel: 유연하고 효율적인 서비스 지향 아키텍처 구축 Feb 19, 2024 pm 04:12 PM

Apache Camel은 서로 다른 애플리케이션, 서비스 및 데이터 소스를 쉽게 통합하여 복잡한 비즈니스 프로세스를 자동화할 수 있는 ESB(Enterprise Service Bus) 기반 통합 프레임워크입니다. ApacheCamel은 경로 기반 구성을 사용하여 통합 프로세스를 쉽게 정의하고 관리합니다. ApacheCamel의 주요 기능은 다음과 같습니다. 유연성: ApacheCamel은 다양한 애플리케이션, 서비스 및 데이터 소스와 쉽게 통합될 수 있습니다. HTTP, JMS, SOAP, FTP 등을 포함한 여러 프로토콜을 지원합니다. 효율성: ApacheCamel은 매우 효율적이어서 많은 수의 메시지를 처리할 수 있습니다. 성능을 향상시키는 비동기 메시징 메커니즘을 사용합니다. 확장 가능

Vue 프로젝트에서 라우팅을 사용하여 페이지 전환 애니메이션 효과를 사용자 정의하는 방법은 무엇입니까? Jul 21, 2023 pm 02:37 PM

Vue 프로젝트에서 라우팅을 사용하여 페이지 전환 애니메이션 효과를 사용자 정의하는 방법은 무엇입니까? 소개: Vue 프로젝트에서 라우팅은 자주 사용하는 기능 중 하나입니다. 페이지 간 전환은 라우팅을 통해 이루어지며 좋은 사용자 경험을 제공합니다. 페이지 전환을 더욱 생생하게 만들기 위해 애니메이션 효과를 사용자 정의하여 구현할 수 있습니다. 이 기사에서는 라우팅을 사용하여 Vue 프로젝트에서 페이지 전환 애니메이션 효과를 사용자 정의하는 방법을 소개합니다. Vue 프로젝트 만들기 먼저 Vue 프로젝트를 만들어야 합니다. VueCLI를 사용하여 빠르게 빌드할 수 있습니다.

ThinkPHP6에서 라우팅을 사용하는 방법 Jun 20, 2023 pm 07:54 PM

ThinkPHP6은 URL 라우팅 구성을 동시에 쉽게 구현할 수 있는 편리한 라우팅 기능을 갖춘 강력한 PHP 프레임워크이며, GET, POST, PUT, DELETE 등과 같은 다양한 라우팅 모드도 지원합니다. 이 기사에서는 라우팅 구성을 위해 ThinkPHP6을 사용하는 방법을 소개합니다. 1. ThinkPHP6 라우팅 모드 GET 방법: GET 방법은 데이터를 얻는 데 사용되는 방법으로 페이지 표시에 자주 사용됩니다. ThinkPHP6에서는 다음을 사용할 수 있습니다.

JavaScript 기능을 사용하여 웹 페이지 탐색 및 라우팅 구현 Nov 04, 2023 am 09:46 AM

최신 웹 애플리케이션에서 웹 페이지 탐색 및 라우팅을 구현하는 것은 매우 중요한 부분입니다. JavaScript 기능을 사용하여 이 기능을 구현하면 웹 애플리케이션을 더욱 유연하고 확장 가능하며 사용자 친화적으로 만들 수 있습니다. 이 기사에서는 JavaScript 기능을 사용하여 웹 페이지 탐색 및 라우팅을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 웹 페이지 탐색 구현 웹 애플리케이션에서 웹 페이지 탐색은 사용자가 가장 자주 조작하는 부분입니다. 사용자가 페이지를 클릭하면

PHP에서 라우팅 규칙을 유연하게 구성하는 구현 방법 및 경험 요약 Oct 15, 2023 pm 03:43 PM

PHP에서 라우팅 규칙의 유연한 구성에 대한 구현 방법 및 경험 요약 소개: 웹 개발에서 라우팅 규칙은 URL과 특정 PHP 스크립트 간의 해당 관계를 결정하는 매우 중요한 부분입니다. 전통적인 개발 방법에서는 일반적으로 라우팅 파일에 다양한 URL 규칙을 구성한 다음 해당 URL을 해당 스크립트 경로에 매핑합니다. 그러나 프로젝트의 복잡성이 증가하고 비즈니스 요구 사항이 변경됨에 따라 각 URL을 수동으로 구성해야 하는 경우 매우 번거롭고 유연성이 없게 됩니다. 그렇다면 PHP로 구현하는 방법은 무엇입니까?

Golang 함수를 사용하여 웹 요청 라우팅을 처리하는 방법 May 02, 2024 am 10:18 AM

Golang에서 함수를 사용하여 웹 요청 라우팅을 처리하는 것은 API를 구축하는 확장 가능하고 모듈화된 방법입니다. 여기에는 다음 단계가 포함됩니다. HTTP 라우터 라이브러리를 설치합니다. 라우터를 만듭니다. 경로에 대한 경로 패턴과 핸들러 함수를 정의합니다. 요청을 처리하고 응답을 반환하는 핸들러 함수를 작성합니다. HTTP 서버를 사용하여 라우터를 실행합니다. 이 프로세스는 들어오는 요청을 처리할 때 모듈식 접근 방식을 허용하여 재사용성, 유지 관리성 및 테스트 가능성을 향상시킵니다.

라우팅을 사용하여 Vue에서 페이지 점프를 구현하는 방법은 무엇입니까? Jul 21, 2023 am 08:33 AM

라우팅을 사용하여 Vue에서 페이지 점프를 구현하는 방법은 무엇입니까? 프론트엔드 개발 기술의 지속적인 발전으로 Vue.js는 가장 인기 있는 프론트엔드 프레임워크 중 하나가 되었습니다. Vue 개발에서 페이지 점프는 필수적인 부분입니다. Vue는 애플리케이션 라우팅을 관리하기 위해 VueRouter를 제공하며, 라우팅을 통해 페이지 간 원활한 전환이 가능합니다. 이 기사에서는 코드 예제와 함께 라우팅을 사용하여 Vue에서 페이지 점프를 구현하는 방법을 소개합니다. 먼저 Vue 프로젝트에 vue-router 플러그인을 설치하세요.

See all articles