vue.js 라우팅이 잘못되어 사용할 수 없습니다.

이번에는 vue.js 라우팅 실패로 인해 사용할 수 없는 문제를 가져오겠습니다. vue.js 라우팅 실패로 인해 사용할 수 없는 경우를 해결하기 위한 주의사항은 무엇인지 살펴보겠습니다.

vue.js에서 라우팅을 새로 배웠고 이전에 작성한 vue 데모(from vue-router 2)에 간단한 라우팅 예제를 추가했는데 클릭을 추가한 후에는 주소 표시줄만 바뀌고 내용도 바뀌지 않습니다. .그리고 이전에 jquery로 작성한 일부 효과도 실패했습니다. 결국 동일한 ID가 두 번 활성화되었기 때문에 원인이 발견되었습니다(첫 번째는 vue 구성 요소를 사용할 때이고 다른 하나는 라우팅할 때였습니다)

부분 의 코드가 첨부되어 있습니다

nbsp;html>


 <meta>
 <!-- 引入样式 -->
 <link>

<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>

<p>
 </p><p>
 <img  src="/static/imghwm/default1.png" data-src="baidu.gif" class="lazy" alt="vue.js 라우팅이 잘못되어 사용할 수 없습니다." >
 </p>
 <el-menu>
 <el-menu-item>基本资料</el-menu-item>
 <el-menu-item>培养信息</el-menu-item>
 <el-menu-item>考核相关</el-menu-item>
 <el-menu-item>清算</el-menu-item>
 </el-menu>

<p>
<el-row>
 <!-- 基本资料-->
 <el-col>
 <el-menu>
 <el-menu-item-group>
 <!-- 路由链接添加处 -->
 <router-link><el-menu-item><i></i>基本信息</el-menu-item></router-link>
 <el-menu-item><i></i>修改密码</el-menu-item>
 </el-menu-item-group>
 <el-menu-item-group>
 <router-link><el-menu-item><i></i>会员信息</el-menu-item></router-link>
 </el-menu-item-group>
 <el-menu-item-group>
 <el-menu-item><i></i>小组信息</el-menu-item>
 </el-menu-item-group>
 </el-menu>
 </el-col>
 </el-row>
<!-- 路由内容显示 -->
</p><p>
 <router-view></router-view>
</p>


 <!-- 先引入 Vue -->
 <script></script>
 <script></script>
 <!-- 引入组件库 -->
 <script></script>
 <script></script>
<script>
 $(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>
//vue组件部分
 var Main = {
 data() {
 return {
  activeIndex: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo&#39;}
 const List = {template:&#39;<p>list&#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>

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

추천 도서:

JS 프로토타입 및 프로토타입 체인 사용에 대한 자세한 설명

Angular CLI 생성 Angular 5 프로젝트 사용에 대한 자세한 설명

위 내용은 vue.js 라우팅이 잘못되어 사용할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!