Vue中使用router进行页面跳转

最新推荐文章于 2024-07-11 15:03:42 发布
最新推荐文章于 2024-07-11 15:03:42 发布
阅读量920 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45648000/article/details/112094716
版权
这篇博客详细介绍了在Vue应用中如何实现页面跳转。通过在路由配置文件router.js或index.js中引入并设置登录组件Login，然后在页面中创建按钮，监听点击事件，结合sessionStorage清除token，最后利用this.$router.push()方法将用户重定向至登录页面，实现退出登录的功能。
摘要由CSDN通过智能技术生成

本文以推出登录为例，点击“退出登录”按钮，返回到登录页面

在路由中增加需要跳转的页面

1)在router文件夹下的router.js或者index.js文件中引入组件页面
从Login.vue文件中引入Login组件

router/index.js

import Login from '../components/Login.vue'

2)写入Login组件的路由

router/index.js

Vue.use(VueRouter)
const routes = [
  {
   
    path
最低0.47元/天 解锁文章
小小的产品经理
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue.js实战之利用vue-router实现跳转页面
weixin_36106791的博客
07-21 1013
前言 使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 在查看官网以及网上相关资料整理如下记录 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果： 一、配置 Router 用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装在这里插入代码片 cnp
vue-router判断页面未登录自动跳转到登录页的方法示例
12-13
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面，登录页不需要检测，首页需要检测 const routers = [ { path: '/', component: App, 　　 children: [ 　　　 { 　　　　path: '/login', 　　　 component: Login, meta: { title: '登录' } 　　 }, 　　　{ 　　　　path: '/home', 　　　 component: Home, meta: { title: '首页'
vue3项目基于vue-router跳转到登录页面
村长在路上
08-01 2276
vue3项目基于vue-router跳转到登录页面
vue 实现点击跳转页面
最新发布
qq_33240556的博客
07-11 907
在Vue中实现点击跳转页面，通常有两种常见的方式：使用组件和编程式导航。下面分别介绍这两种方法。
vue中router路由跳转
m0_65753088的博客
04-22 943
vue中router路由跳转，router-link 和 router-view
vue路由跳转到登录页
XYLH2015的博客
03-15 536
1 // 第一种 2 { 3 path:'/', 4 component: require('../components/Login.vue') 5 }, 6 7 8 // 第二种 9 { path: '/', redirect: '/wordcloud' }, 10 { path: '/wo...
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的...本文介绍了 Vue 页面跳转不用 router-link 的实现代码，包括使用 v-if 指令控制页面显示和隐藏、使用数据绑定控制页面显示和隐藏，以及使用 router-link 跳转传值示例实现页面跳转。
vue-router跳转页面的方法
08-31
Vue-router 提供了强大的页面导航和路由管理功能，使得在单页应用(SPA)中轻松地进行页面间的跳转。 ### 安装 Vue-router 首先，你需要通过 npm 来安装 vue-router： ```bash npm install vue-router --save-dev `...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
vue-router跳转时打开新页面的两种方法
10-16
主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
VUE 使用路由跳转登录页面
m0_74411635的博客
04-30 709
登录
【备忘录】从头搭建VUE项目，配置ROUTE路由，并使用AXIOS跨域访问后端
Xcong_Zhu的博客
11-18 2684
学习笔记整理
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
VUE搭建一个Login页面和Home页
qq_45709416的博客
08-10 480
发现页头宽度没有占满浏览器，在index.html的body添加去除浏览器默认样式。发现左菜单栏，如果要添加其他的菜单就要在页面重复添加菜单的代码，就用一个办法。添加菜单激活回调事件，可以获取到子组件的index。在main.js引入element-ui。效果不对，应该展示到页头最右边，添加样式。在主页就展示了Test1测试组件的页面。加入Container 布局容器。删除一些只留下导航一，展示效果。在左侧菜单index添加路径。可以遍历router的内容。测试组件配置router。
vue-router 用户登陆
weixin_33896069的博客
04-23 121
有些路由页面需要用户登陆之后才能访问如（用户中心），如果用户没有登陆就访问这些页面的话就应该转换到登陆页面，登陆成功之后在进入该页面。 需要用到的知识点有：H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆。 const router = new ...
项目总结之vue Router中的跳转自动加上#/
时清云的博客
04-23 3750
最近弄懂一个小问题，就想着先总结下来。是关于vue Router的跳转问题，就是如果引入了vue-router，例如给一个这样的链接https:www.app/index.html，但是真正在浏览器中输入后执行的时候就变成了 https:www.app/index.html#/，为什么呢？原来是因为引入了vue-router，引入vue-router后，再点开链接的时候，会自动加上#/，因为vue...
Vue中管理路由-vue-router路由配置
dreamingbaobei的博客
09-17 523
路由懒加载 路由嵌套 路由守卫 参数传递 路由中的钩子 watch（监测变化） $route 对象： 实现不同路由不同页面title 重定向 编程式导航 路由组件传参
Vue实现未登录跳转到登录页
Mjxiaomihu的博客
08-16 9262
Vue实现未登录跳转到登录页
Vue笔记（十五）—— Vue 结合router文档实现登录页跳转首页，同级和子级视图组件替换
成长笔记
04-22 1536
1.router声明（index.js）增加登录拦截，同时更新路由嵌套，更新部分代码如下： export default new Router({ routes: [ // HelloWorld { path: '/', name: 'HelloWorld', component: HelloWorld, }, // 登录 ...
vue中$ router怎么使用跳转页面
04-10
你好！关于你的问题，$ router 可以使用以下方式跳转页面： 在 Vue 实例中，第一个步骤是引入 vue-router 并在 Vue 中使用。 然后需要定义路由，即指定 URL 路径和对应组件。 接着，在组件内部使用 $router.push() 方法可以跳转到另一个路由路径。例如：$router.push('/path')。 希望以上方法对你有所帮助。如果你还有其他问题，可以继续提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值