【Vue 2】 Vue2中两种路由跳转方式
路由跳转,就是写一个方法传递url参数,使其路由跳转。
·
【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>
这里最重要的就是 this.$router.push(url);
完。。。。。。
更多推荐
已为社区贡献4条内容
所有评论(0)