vue设置首页不经过路由，直接使用自定义的html页面

最新推荐文章于 2024-03-18 15:09:34 发布
最新推荐文章于 2024-03-18 15:09:34 发布
阅读量1.7k 收藏
点赞数
文章标签： 前端 vue 路由 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyys/article/details/118854475
版权

vue设置首页不经过路由，直接使用自定义的html页面

直接在路由跳转那里设置 window.location.href 参数为要跳转的html页面就可以了
在这里插入图片描述

江左吴郎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue2编写主体页面
5年编程经验的老猿。
04-28 521
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
vue自定义标签和单页面多路由的实现代码
11-21
下面我们将深入探讨如何在 Vue 中实现自定义标签以及单页面多路由的配置。 ### 1. Vue 自定义组件标签 自定义组件标签是 Vue 的核心特性之一，它允许我们将独立的功能或视图封装成可重用的模块。例如，如果你有一...
vue项目中，把已经写好的html直接放进去，而不经过编译，直接跳转html页面
m0_67841039的博客
09-07 3761
2.如果项目根目录没有public,但是有static文件夹，则同样把/pages/test.html放进 static文件夹里，按照static的绝对路径访问。1.项目根目录里，如果有public文件夹，则直接放进public文件夹里，与index.html 同级开始，按照项目路径访问。
vue实现不用路由的页面切换与自动登录
曾小超的博客
05-31 6090
页面切换 我做的后台页面较少，所以不需要用到路由 1.登录后切换到老师或者学生的页面，通过is_admin来判断登录的是老师还是学生 data(){ return{ login:false } } <Author v-if="!login"></Author> <div v-else> 学生或者老师的页面 </div> 2.问题：无论成功或者失败，都是走成功的回调函数，
Vue路由非路由组件的使用
qq_42919799的博客
09-18 965
借鉴文章：路由组件的使用 自己整理 非路由组件使用 定义 定义在 components文件夹中 -----components(里面的内容都是公共的) 注册 注册在 App.vue 使用 在App 中书写组件标签 路由组件的使用 定义 定义在pages中 -------pages(是自定义的一个文件夹用于保存路由组件) 注册 路由器相关配置 1.安装路由 npm i vue-router -S 2.引入并声明使用路由插件 3.向外暴露一个路由器的对象
vue项目跳转html页面
最新发布
weixin_44042792的博客
03-18 960
1. 把html页面以及相关文件放到public文件夹下（目的和index.html同级）2.在vue项目中正常写跳转事件，只是路径写法需要注意。
vue切换路由回到顶部或者指定位置
FormAda的博客
09-09 1117
vue路由中有一个方法scrollBehavior可以实现
在Vue3项目中，输入没有路由对应的路径时候，怎么跳转到404或者首页
百度一下 猎人社区
04-29 3964
在一个Vue3应用中，通常情况下，我们使用Vue Router来处理路由。在Vue Router中，当用户请求输入一个不正确的URL路径时，没有路由与其相匹配，这时候会返回一个默认的404页面或者重定向到首页。因此，本文将通过以下几个方面来讨论如何在Vue3项目中实现这一功能。
vue-router之nuxt动态路由设置的两种方法小结
10-17
在Vue.js应用中，路由管理是非常关键的一部分，特别是在Nuxt.js框架中，它是一个基于Vue.js的服务器渲染框架。本文将详细介绍如何在Nuxt.js中设置动态路由的两种方法。 ### 方法一：通过`<nuxt-link>`组件 在Vue....
vue路由单页组件+ElementUI的使用更新.docx
10-04
在本教程中，我们将探讨如何使用Vue CLI快速搭建一个包含Vue Router和Element UI的单页应用。Vue CLI是一个官方提供的脚手架工具，用于快速初始化Vue项目，它简化了项目配置，使开发者能够集中精力编写核心业务代码...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
如何在vue项目中引入html页面
热门推荐
qq_45801837的博客
11-18 5万+
在vue项目中引入html页面的两种方法第一种：/static/page.html第二种：通过iframe嵌入 第一种：/static/page.html 在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问 第二种：通过iframe嵌入 第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。 ...
vue不在一个路由配置中，怎么实现页面跳转？
stay hungry, stay foolish
05-18 1504
如果两个页面不在同一个路由配置中，可以使用HTML中的超链接标签，或者使用JavaScript中的location对象的方法进行页面跳转。
vue中渲染html网页
大炮哥的博客
06-10 1万+
有的时候我们想在vue中直接显示一个html的网页，如果用富文本方式，那么内容就会太多，那么怎么处理呢? 直接上代码步骤一： 新建一个vue文件，命名为"HtmlPanel.vue"，内容如下 步骤二 使用上述的vue组件 在你的vue页面中添加如下代码 OK！就2个步骤，有帮助的话，麻烦点个赞。此外 如果遇到跨域，那么请到以下这篇文章 https://blog.csdn.net/u010775335/article/details/110857411HtmlPanel.vue中使用到的this.$http
vue跳转外链页面以及跳转html页面超简单方法
qq_39123467的博客
11-17 4206
vue跳转外链页面以及跳转html页面超简单方法
vue如何不用路由动态加载组件
weixin_42602241的博客
02-15 337
Vue 支持动态加载组件的方法有多种，其中一种不使用路由的方法是使用 Vue 的动态组件功能。 您可以通过在 Vue 实例的 data 选项中定义一个变量来动态更改加载的组件，并在模板中使用该变量作为组件名称。 以下是一个示例： <template> <div> <component :is="currentComponent"></compo...
vue3.0 路由隐藏地址栏
ksx2333的博客
11-24 4057
vue3.0 路由隐藏地址栏，VUE hash路由和history路由的区别。
Vue学习：编程式路由导航（不借助router-link进行路由跳转）
weixin_47295886的博客
03-10 545
使用router-link标签进行路由跳转--》最终是转换成a标签，但是有些时候跳转不是a标签 是按钮也可以。使用$router进行操作--替换router-link m参数是上面传递。有两个按钮：push查看 replace查看。
vue不配置路由，切换页面
weixin_62328829的博客
09-23 3926
我期望实现是这样的效果，点击资料设置 ，右侧会显示资料设置页面，点击修改密码 ，右侧会显示修改密码页面。在日常开发中，通常实现页面跳转是通过路由实现的，那么不利用路由能否实现这个功能呢？这样就可以实现不使用路由，切换页面了。合理运用v-if完美实现。
vuepress 设置 404 500 页面跳转到指定页面
06-09
要在VuePress中设置404和500错误页面跳转到指定页面，可以通过配置 `.vuepress/config.js` 文件来实现。 首先，需要在 `.vuepress/public` 目录下创建自定义的 404.html 和 500.html 错误页面。 然后，在 `.vuepress/config.js` 中添加以下配置： ```js module.exports = { // ... // 自定义404和500页面 configureWebpack: { resolve: { alias: { '@404': '/404.html', '@500': '/500.html' } } }, extend: '@vuepress/theme-default', themeConfig: { // ... }, // 自定义错误页面路由 plugins: [ [ '@vuepress/plugin-register-components', { components: [ { name: '404Page', path: '@404' }, { name: '500Page', path: '@500' } ] } ] ] } ``` 其中，`@404` 和 `@500` 分别是自定义的 404 和 500 页面的别名，`@` 表示 `.vuepress/public` 目录。 接着，在 `.vuepress/theme/index.js` 中添加以下代码： ```js export default { // ... async enhanceApp({ app }) { // 注册全局路由守卫，用于处理404和500页面的跳转 app.router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next({ name: '404Page' }); } else if (to.matched.some(record => record.meta && record.meta.status === 500)) { next({ name: '500Page' }); } else { next(); } }); } } ``` 这段代码注册了全局路由守卫，并在路由跳转时判断路由是否匹配成功，如果没有匹配成功则跳转到 404 页面，如果匹配成功但状态码为 500 则跳转到 500 页面。 最后，在需要跳转到 404 或 500 页面的地方，可以使用路由跳转的方式来实现： ```js this.$router.push({ name: '404Page' }); // 跳转到 404 页面 this.$router.push({ name: '500Page' }); // 跳转到 500 页面 ``` 这样就完成了在 VuePress 中设置 404 和 500 页面跳转到指定页面的配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江左吴郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值