使用vue.js路由后失效如何解决-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

使用vue.js路由后失效如何解决

May 21, 2018 am 11:15 AM

javascript vue.js bagaimana

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

附上部分代码

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;!-- 引入样式 --&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/element-ui/lib/theme-default/index.css&quot; rel=&quot;external nofollow&quot; &gt;
&lt;/head&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;body&gt;
&lt;p id=&quot;top-menu&quot;&gt;
 &lt;p class=&quot;logo&quot;&gt;
 &lt;img src=&quot;baidu.gif&quot; alt=&quot;&quot;&gt;
 &lt;/p&gt;
 &lt;el-menu :default-active=&quot;activeIndex&quot; class=&quot;el-menu-demo&quot; mode=&quot;horizontal&quot; @select=&quot;handleSelect&quot;&gt;
 &lt;el-menu-item index=&quot;1&quot; class=&quot;nav1&quot;&gt;基本资料&lt;/el-menu-item&gt;
 &lt;el-menu-item index=&quot;2&quot; class=&quot;nav2&quot;&gt;培养信息&lt;/el-menu-item&gt;
 &lt;el-menu-item index=&quot;3&quot; class=&quot;nav3&quot;&gt;考核相关&lt;/el-menu-item&gt;
 &lt;el-menu-item index=&quot;4&quot; class=&quot;nav4&quot;&gt;清算&lt;/el-menu-item&gt;
 &lt;/el-menu&gt;
&lt;/p&gt;
&lt;p id=&quot;left-menu&quot;&gt;
&lt;el-row class=&quot;tac&quot;&gt;
 &lt;!-- 基本资料--&gt;
 &lt;el-col :span=&quot;8&quot; class=&quot;bar1&quot;&gt;
 &lt;el-menu mode=&quot;vertical&quot; default-active=&quot;1&quot; class=&quot;el-menu-vertical-demo&quot; @select=&quot;handleSelect&quot; theme=&quot;dark&quot;&gt;
 &lt;el-menu-item-group title=&quot;个人资料&quot;&gt;
 &lt;!-- 路由链接添加处 --&gt;
 &lt;router-link to = &quot;/information&quot;&gt;&lt;el-menu-item index=&quot;1&quot;&gt;&lt;i class=&quot;el-icon-message&quot;&gt;&lt;/i&gt;基本信息&lt;/el-menu-item&gt;&lt;/router-link&gt;
 &lt;el-menu-item index=&quot;2&quot;&gt;&lt;i class=&quot;el-icon-message&quot;&gt;&lt;/i&gt;修改密码&lt;/el-menu-item&gt;
 &lt;/el-menu-item-group&gt;
 &lt;el-menu-item-group title=&quot;会员资料&quot;&gt;
 &lt;router-link to = &quot;/list&quot;&gt;&lt;el-menu-item index=&quot;3&quot;&gt;&lt;i class=&quot;el-icon-message&quot;&gt;&lt;/i&gt;会员信息&lt;/el-menu-item&gt;&lt;/router-link&gt;
 &lt;/el-menu-item-group&gt;
 &lt;el-menu-item-group title=&quot;小组资料&quot;&gt;
 &lt;el-menu-item index=&quot;4&quot;&gt;&lt;i class=&quot;el-icon-message&quot;&gt;&lt;/i&gt;小组信息&lt;/el-menu-item&gt;
 &lt;/el-menu-item-group&gt;
 &lt;/el-menu&gt;
 &lt;/el-col&gt;
 &lt;/el-row&gt;
&lt;!-- 路由内容显示 --&gt;
&lt;p class = &quot;content&quot;&gt;
 &lt;router-view&gt;&lt;/router-view&gt;
&lt;/p&gt;
&lt;/p&gt;
&lt;/body&gt;
 &lt;!-- 先引入 Vue --&gt;
 &lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;&gt;&lt;/script&gt;
 &lt;!-- 引入组件库 --&gt;
 &lt;script src=&quot;https://unpkg.com/element-ui/lib/index.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;http://code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 $(document).ready(function(){
 $(&quot;.nav1&quot;).click(function(){
 $(&quot;.bar1&quot;).show().siblings().hide(); 
 })
 $(&quot;.nav2&quot;).click(function(){
 $(&quot;.bar2&quot;).show().siblings().hide(); 
 })
 $(&quot;.nav3&quot;).click(function(){
 $(&quot;.bar3&quot;).show().siblings().hide();
 })
 })
 &lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
//vue组件部分
 var Main = {
 data() {
 return {
  activeIndex: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;&lt;p&gt;foo&lt;/p&gt;&#39;}
 const List = {template:&#39;&lt;p&gt;list&lt;/p&gt;&#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;)
 &lt;/script&gt;
&lt;/html&gt;

Salin selepas log masuk

Atas ialah kandungan terperinci 使用vue.js路由后失效如何解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn