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

嗯mua.

已于 2022-09-26 16:41:29 修改

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-09-25 00:00:14 首次发布

原文链接：https://www.bilibili.com/video/BV1Tt4y1772f/?spm_id_from=333.999.0.0

Vue 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

标签式
编程式

标签式

首先是 标签式 路由跳转，借用 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>