vue-router 注意事项
1、vue-router 两种模式
(1)mode:hash,hash模式背后的原理是onhashchange
事件,可以在window
对象上监听这个事件。vue默认为hash模式
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
(2)mode:history
const router = new VueRouter({ mode:"history", routes:[] })
不怕前进,不怕后退,就怕刷新F5,如果后端没有准备的话,刷新是实实在在地去请求服务器的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题,但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会刷出一个404来。
2、嵌套路由
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <p> <router-link to="/user/foo">/user/foo</router-link> <router-link to="/user/foo/profile">/user/foo/profile</router-link> <router-link to="/user/foo/posts">/user/foo/posts</router-link> </p> <router-view></router-view> </div>
const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } const UserHome = { template: '<div>Home</div>' } const UserProfile = { template: '<div>Profile</div>' } const UserPosts = { template: '<div>Posts</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // UserHome will be rendered inside User's <router-view> // when /user/:id is matched { path: '', component: UserHome }, // UserProfile will be rendered inside User's <router-view> // when /user/:id/profile is matched { path: 'profile', component: UserProfile }, // UserPosts will be rendered inside User's <router-view> // when /user/:id/posts is matched { path: 'posts', component: UserPosts } ] } ] }) const app = new Vue({ router }).$mount('#app')
3、嵌套命名视图
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Nested Named Views</h1> <router-view></router-view> </div>
const UserSettingsNav = { template: ` <div class="us__nav"> <router-link to="/settings/emails">emails</router-link> <br> <router-link to="/settings/profile">profile</router-link> </div> ` } const UserSettings = { template: ` <div class="us"> <h2>User Settings</h2> <UserSettingsNav/> <router-view class ="us__content"/> <router-view name="helper" class="us__content us__content--helper"/> </div> `, components: { UserSettingsNav } } const UserEmailsSubscriptions = { template: ` <div> <h3>Email Subscriptions</h3> </div> ` } const UserProfile = { template: ` <div> <h3>Edit your profile</h3> </div> ` } const UserProfilePreview = { template: ` <div> <h3>Preview of your profile</h3> </div> ` } const router = new VueRouter({ mode: 'history', routes: [ { path: '/settings', // You could also have named views at tho top component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] } ] }) router.push('/settings/emails') new Vue({ router, el: '#app' })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构