vue.js路由失效如何处理
这次给大家带来vue.js路由失效如何处理，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: '1'
};
},
methods: {
handleSelect(key, keyPath) {
/*console.log(key, keyPath);*/
}
}
}
//vue路由部分
const Information = {template:'<p>foo</p>'}
const List = {template:'<p>list</p>'}
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')
</script>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci vue.js路由失效如何处理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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.
Artikel Panas
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)
Topik panas
1386
52
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
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
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
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
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
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.
Kaedah penambahan dan pemadaman dinamik laluan dalam uniapp
Dec 17, 2023 pm 02:55 PM
Uniapp ialah rangka kerja silang berdasarkan Vue.js Ia menyokong penulisan sekali dan menjana aplikasi berbilang hujung seperti H5, program mini dan APP pada masa yang sama Ia memberi perhatian yang besar kepada prestasi dan kecekapan pembangunan proses pembangunan. Dalam Uniapp, penambahan dinamik dan pemadaman laluan adalah masalah yang sering dihadapi semasa proses pembangunan Oleh itu, artikel ini akan memperkenalkan penambahan dan pemadaman dinamik laluan dalam Uniapp dan memberikan contoh kod khusus. 1. Tambah laluan secara dinamik Mengikut keperluan sebenar, apabila halaman dimuatkan atau selepas operasi pengguna.
