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

【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);

完。。。。。。