vue.js路由失效如何处理-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

vue.js路由失效如何处理

Jun 15, 2018 pm 03:55 PM

vue.js penghalaan

这次给大家带来vue.js路由失效如何处理，vue.js路由失效如何处理的注意事项有哪些，下面就是实战案例，一起来看一下。

新学了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(){
 $(".nav1").click(function(){
 $(".bar1").show().siblings().hide(); 
 })
 $(".nav2").click(function(){
 $(".bar2").show().siblings().hide(); 
 })
 $(".nav3").click(function(){
 $(".bar3").show().siblings().hide();
 })
 })
 &lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
//vue组件部分
 var Main = {
 data() {
 return {
  activeIndex: '1'
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:'&lt;p&gt;foo&lt;/p&gt;'}
 const List = {template:'&lt;p&gt;list&lt;/p&gt;'}
 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')
 &lt;/script&gt;
&lt;/html&gt;

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！