解决使用vue.js路由后失效的问题-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

解决使用vue.js路由后失效的问题

亚连

May 29, 2018 pm 03:51 PM

vue.js penghalaan

下面我就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自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: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo</p>&#39;}
 const List = {template:&#39;<p>list</p>&#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>
</html>

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

spirngmvc js传递复杂json参数到controller的实例

Vue.js 表单控件操作小结

js传递数组参数到后台controller的方法

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7343

Tutorial Java

1627

Tutorial CakePHP

1352

Tutorial Laravel

1265

Tutorial PHP

1214

Tunjukkan Lagi

Related knowledge

Cara melaksanakan penghalaan API dalam rangka kerja Slim Aug 02, 2023 pm 05:13 PM

Cara melaksanakan penghalaan API dalam rangka kerja Slim Slim ialah rangka kerja mikro PHP ringan yang menyediakan cara mudah dan fleksibel untuk membina aplikasi web. Salah satu ciri utama ialah pelaksanaan penghalaan API, membolehkan kami memetakan permintaan yang berbeza kepada pengendali yang sepadan. Artikel ini akan memperkenalkan cara melaksanakan penghalaan API dalam rangka kerja Slim dan memberikan beberapa contoh kod. Pertama, kita perlu memasang rangka kerja Slim. Versi terbaru Slim boleh dipasang melalui Komposer. Buka terminal dan

Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Feb 19, 2024 pm 04:12 PM

Apache Camel ialah rangka kerja penyepaduan berasaskan Bas Perkhidmatan Perusahaan (ESB) yang mudah menyepadukan aplikasi, perkhidmatan dan sumber data yang berbeza untuk mengautomasikan proses perniagaan yang kompleks. ApacheCamel menggunakan konfigurasi berasaskan laluan untuk mentakrif dan mengurus proses penyepaduan dengan mudah. Ciri utama ApacheCamel termasuk: Fleksibiliti: ApacheCamel boleh disepadukan dengan mudah dengan pelbagai aplikasi, perkhidmatan dan sumber data. Ia menyokong pelbagai protokol, termasuk HTTP, JMS, SOAP, FTP, dll. Kecekapan: ApacheCamel sangat cekap, ia boleh mengendalikan sejumlah besar mesej. Ia menggunakan mekanisme pemesejan tak segerak, yang meningkatkan prestasi. Boleh dikembangkan

Gunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web Nov 04, 2023 am 09:46 AM

Dalam aplikasi web moden, melaksanakan navigasi dan penghalaan halaman web adalah bahagian yang sangat penting. Menggunakan fungsi JavaScript untuk melaksanakan fungsi ini boleh menjadikan aplikasi web kami lebih fleksibel, berskala dan mesra pengguna. Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web serta memberikan contoh kod khusus. Melaksanakan navigasi halaman web Untuk aplikasi web, navigasi halaman web adalah bahagian yang paling kerap dikendalikan oleh pengguna. Apabila pengguna mengklik pada halaman

Cara menggunakan penghalaan dalam ThinkPHP6 Jun 20, 2023 pm 07:54 PM

ThinkPHP6 ialah rangka kerja PHP yang berkuasa dengan fungsi penghalaan mudah yang boleh melaksanakan konfigurasi penghalaan URL dengan mudah Pada masa yang sama, ThinkPHP6 juga menyokong berbilang mod penghalaan, seperti GET, POST, PUT, DELETE, dll. Artikel ini akan memperkenalkan cara menggunakan ThinkPHP6 untuk konfigurasi penghalaan. 1. Mod penghalaan ThinkPHP6 Kaedah GET: Kaedah GET ialah satu cara untuk mendapatkan data dan sering digunakan untuk paparan halaman. Dalam ThinkPHP6, anda boleh menggunakan yang berikut

Kaedah pelaksanaan dan ringkasan pengalaman mengkonfigurasi peraturan penghalaan secara fleksibel dalam PHP Oct 15, 2023 pm 03:43 PM

Kaedah pelaksanaan dan ringkasan pengalaman konfigurasi fleksibel peraturan penghalaan dalam PHP Pengenalan: Dalam pembangunan Web, peraturan penghalaan adalah bahagian yang sangat penting, yang menentukan hubungan yang sepadan antara URL dan skrip PHP tertentu. Dalam kaedah pembangunan tradisional, kami biasanya mengkonfigurasi pelbagai peraturan URL dalam fail penghalaan, dan kemudian memetakan URL ke laluan skrip yang sepadan. Walau bagaimanapun, apabila kerumitan projek meningkat dan keperluan perniagaan berubah, ia akan menjadi sangat rumit dan tidak fleksibel jika setiap URL perlu dikonfigurasikan secara manual. Jadi, bagaimana untuk melaksanakan dalam PHP

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Jul 21, 2023 pm 02:37 PM

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Pengenalan: Dalam projek Vue, penghalaan adalah salah satu fungsi yang sering kami gunakan. Pertukaran antara halaman boleh dicapai melalui penghalaan, memberikan pengalaman pengguna yang baik. Untuk menjadikan penukaran halaman lebih jelas, kami boleh mencapainya dengan menyesuaikan kesan animasi. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue. Buat projek Vue Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI untuk membina dengan cepat

Petua untuk menggunakan pemintas laluan dalam uniapp Dec 17, 2023 pm 04:30 PM

Petua untuk menggunakan pemintas laluan dalam uniapp Dalam pembangunan uniapp, pemintas laluan adalah fungsi yang sangat biasa. Pemintas laluan membolehkan kami melakukan beberapa operasi tertentu sebelum lompatan laluan, seperti pengesahan kebenaran, parameter laluan halaman, dsb. Dalam artikel ini, kami akan memperkenalkan petua untuk menggunakan pemintas laluan dalam uniapp dan memberikan contoh kod khusus. Buat pemintas laluan Pertama, kita perlu mencipta pemintas laluan dalam projek uniapp. Kaedah penciptaan adalah seperti berikut: Buat inter dalam direktori akar projek

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Jul 21, 2023 am 08:33 AM

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular. Dalam pembangunan Vue, lompat halaman adalah bahagian penting. Vue menyediakan VueRouter untuk mengurus penghalaan aplikasi, dan penukaran lancar antara halaman boleh dicapai melalui penghalaan. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan lonjakan halaman dalam Vue, dengan contoh kod. Mula-mula, pasang pemalam vue-router dalam projek Vue.

See all articles