【Vue 2】 Vue2中两种路由跳转方式

转载 已于 2022-09-26 16:41:29 修改 · 4.9k 阅读 · 5 ·
CC 4.0 BY-SA版权
原文链接：https://www.bilibili.com/video/BV1Tt4y1772f/?spm_id_from=333.999.0.0
文章标签：

#vue.js #javascript #前端

于 2022-09-25 00:00:14 首次发布
本文介绍了Vue2中实现页面跳转的两种方法：标签式和编程式路由跳转。标签式通过使用<router-link>组件及其to属性完成导航；编程式则通过定义方法并利用this.$router.push(url)实现动态路由跳转。

【Vue 2】 Vue2中两种路由跳转方式

  1. 标签式
  2. 编程式

标签式

首先是 标签式 路由跳转，借用 router-link 的 to 属性进行跳转。

<el-aside width="200px">
    <router-link to="/c1/p1">P1</router-link>
    <router-link to="/c1/p2">P2</router-link>
    <router-link to="/c1/p3">P3</router-link>
</el-aside>

编程式

然后是 编程式 路由跳转，就是写一个方法传递url参数，使其路由跳转。

<el-header>
    <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c1/p1')"></el-button>
    <el-button type="success" icon="el-icon-check" 
               circle size="mini" @click="jump('/c1/p2')"></el-button>
    <el-button type="warning" icon="el-icon-star-off" 
               circle size="mini" @click="jump('/c1/p3')"></el-button>
</el-header>

编写一个 jump 方法。

<script>
const options = {
    methods : {
        jump(url) {
            this.$router.push(url);
        }
    }
}
export default options;
</script>

这里最重要的就是 this.$router.push(url);

完。。。。。。

Vue2---router实现路由跳转
AZURE060606的博客
05-02 1327
而跳转的路径要以router/index.js中的path为准。现在访问active路径就可以显示Active组件了。所谓路由，就是将一个个组件映射到不同的路由url中。首先要将App内的内容换成router-view。现在去注册路由，还是以上面的Active组件为例。
Vue 2 中页面跳转方式的详细介绍
licy__的博客
12-18 2374
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它提供了多种方法来实现页面之间的导航。在 Vue 2 中，页面跳转主要通过 Vue Router 来管理，同时也支持其他方式如编程式导航和使用锚点链接。本文将详细介绍 Vue 2 中的各种页面跳转方式，并通过具体的代码示例帮助你更好地掌握这些功能。
vue2路由跳转的所有方式
dreams_dream的博客
09-06 410
适用于设置默认页面或兼容旧路径。{ path: '/', redirect: '/home' }, // 重定向{ path: '/old-home', alias: '/home' } // 别名redirect：访问会自动跳转到/homealias：访问/old-home实际显示的是/home的内容。
Vue2（十四）：路由的使用及注意点、嵌套路由、路由的query和params参数、props配置
m0_73560798的博客
04-08 1541
1、路由就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库（vue-router），专门用来实现 SPA 应用。
Vue2路由跳转
小尘的博客
02-24 1624
原页面表单中的内容会丢失；向前或者向后跳转n个页面，n可为正整数或负整数this.$router.go(-1)：后退一步+刷新this.$router.go(0)：刷新；this.$router.go(1) ：前进一步原页面表单中的内容会保留；向前或者向后跳转n个页面，n可为正整数或负整数this.$router.back():后退；this.$router.back(0) 刷新；this.$router.back(1)：前进。
vue2路由跳转页面
2201_75514915的博客
03-17 7057
vue路由跳转，当前页面跳转和打开一个新窗口跳转
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
详解vue 路由跳转四种方式 (带参数)
10-17
本文主要介绍在Vue.js中使用Vue Router进行路由跳转的四种方式，同时这四种方式还支持传递参数。 1. router-link标签跳转（带参数） Vue Router提供了组件来创建a标签，实现声明式的导航。当使用进行路由跳转时，...
Vue组件内详解路由跳转四种带参方式
07-02
本文着重阐述 Vue.js 中借助 Vue Router 实现路由跳转的四种方法，这四种方法均可传递参数。 第一种是利用 <router-link><router-link>、。带参数跳转（params）示例：, params: { id: 1 } }">，此时路由配置需有...
Vue.js中该如何自己维护路由跳转记录
10-16
在Vue.js开发中，维护路由跳转记录是非常重要的，特别是在处理用户导航历史和回退操作时。传统的`router.go(n)`方法可能会导致用户跳出当前应用，因为它依赖于浏览器的浏览历史。为了解决这个问题，我们可以自定义一...
vue相同路由跳转强制刷新该路由组件操作
10-14
在触发路由跳转的方法中，可以这样做： ```javascript this.$router.push({ path: "/xxx", query: { t: Date.now(), }, }); ``` 这将导致路由发生变化，但由于Vue Router仅比较路径和参数，而不考虑查询，...
Vue路由跳转方法
XUDONG93的博客
09-11 3717
生命周期函数中导入Vue Router，并且需要使用。方法相似，但是不会保留浏览器的历史记录。值得注意的是，在Vue的组件内使用。方法进行跳转，此方法和。对象时，需要先在组件的。方法进行历史记录跳转。
vue2的跳转路由
qq_43203949的博客
12-15 7557
vue的路由跳转 准备工作 /router/index.js import VueRouter from 'Vue-router' import Vue from 'vue' Vue.use(VueRouter) const routes = [] //route对象（填写路由） const router = new VueRouter({routes}) export default router; 1.通过在$router更改 ​ vue路由路径可以通过Vue中的router对
vue2 两种路由跳转方式
2201_75600005的博客
05-08 837
传的什么用什么接受。
VUE2设置页面跳转的方法-使用 `router-link`组件
A66457的博客
10-17 1773
本文主要介绍了使用‘router-link’组件来实现页面跳转
Vue2：编程式路由页面跳转
Brave_heart4pzj的博客
02-27 562
Vue
vue2页面内跳转
qq_53876295的博客
11-20 8183
vue2页面内跳转
vue中页面跳转方法
hh3167253066的博客
07-26 2510
1：router-link <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳转1</button> </
vue2点击按钮进行页面跳转
m0_67011090的博客
09-11 608
【代码】vue2点击按钮进行页面跳转。
vue2 路由跳转
最新发布
10-29
<think>我们需要回答关于Vue2路由跳转的问题，并按照要求提出3-5个相关问题。 用户询问的是Vue2中的路由跳转，我们将介绍几种常见的路由跳转方式，包括声明式导航和编程式导航，并给出示例代码。 注意：在Vue2中，我们通常使用vue-router来实现路由跳转。 回答结构： 1. 简要介绍Vue2路由跳转的两种主要方式。 2. 分别给出声明式导航和编程式导航的示例代码（包含主要用法）。 3. 提出相关问题（3-5个），并以“§§相关问题§§”开头，然后列出问题。 注意：在Vue2中，我们使用`this.$router`进行编程式导航，而声明式导航使用`<router-link>`组件。 我们将展示两种方式的基本用法，并提及路由传参的常见方法（如params和query）。 </think>以下是 Vue2 中路由跳转的详细实现方法和代码示例： ### 一、核心跳转方式 #### 1. 声明式导航 (模板中使用) ```html <router-link to="/home">首页</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">用户页</router-link> <router-link :to="{ path: '/search', query: { keyword: 'vue' }}">搜索</router-link> ``` #### 2. 编程式导航 (JS 中使用) ```javascript // 基础跳转 this.$router.push('/home') // 对象形式跳转 this.$router.push({ path: '/user/123' }) // 命名路由 + 参数 this.$router.push({ name: 'profile', params: { userId: 456 } }) // 带查询参数 this.$router.push({ path: '/results', query: { q: 'vue router' } }) // 替换当前路由 (无历史记录) this.$router.replace('/login') // 前进/后退 this.$router.go(1) // 前进1页 this.$router.go(-2) // 后退2页 ``` ### 二、路由传参详解 ```javascript // 定义动态路由 const routes = [ { path: '/user/:id', component: User } ] // 获取参数 (在User组件中) export default { mounted() { console.log(this.$route.params.id) // 输出路由参数 console.log(this.$route.query.name) // 输出查询参数 } } ``` ### 三、导航守卫示例 ```javascript // 全局前置守卫 router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated) { next('/login') // 重定向 } else { next() // 放行 } }) // 组件内守卫 export default { beforeRouteEnter(to, from, next) { // 在渲染该组件前调用 next(vm => { // 通过vm访问组件实例 }) } } ``` ### 四、路由配置示例 ```javascript // router.js import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import('./views/About.vue'), // 懒加载 meta: { requiresAuth: true } // 路由元信息 } ] }) ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值