vue.js路由失效如何處理

這次帶給大家vue.js路由失效如何處理，vue.js路由失效如何處理的注意事項有哪些，以下就是實戰案例，一起來看一下。

新學了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自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中文網其它相關文章！

推薦閱讀：

react native video做出全螢幕效果

Angular CLI Angular 5實戰專案示範

以上是vue.js路由失效如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！