vue如何通过router-link或者button跳转到一个新的页面

目录 通过router-link或者button跳转到一个新的页面 vue跳转到一个新的页面的多种方法 1、router-link路由 2、button按钮  3、a链接

通过router-link或者button跳转到一个新的页面

a、商品列表页面如下（点击'跳转到购物车页面'就会跳到一个新的页面，而不是在同一个页面加载一个组件）

<template>
? <div>
? ? 这是商品列表页面
? ? <router-link to='/goods/title'>显示商品标题</router-link>
? ? <router-link to='/goods/image'>显示商品图片</router-link>
? ? // 跳转到购物车页面
? ? <router-link to='/cart'>跳转到购物车页面</router-link>
? ? ?<button @click="jump">Button-跳转到购物车页面</button>
? ? <div>
? ? ? ? <router-view></router-view>
? ? </div>
? </div>
</template>

<script>
export default {
? data(){
? ? return{
? ? ? msg: ''
? ? }
? },
? methods: {
? ? jump(){
? ? //this.$router.push("/cart")
? ? //传递的参数用{{ $route.query.goodsId }}获取
? ? this.$router.push({path: '/cart?goodsId=12'})
? ? //this.$router.go(-2)
? ? //后退两步
? ? }
? }
}
</script>
?
<style>
</style>

b、通过<router-link>方法还需要修改路由文件src/router/index.js，其他方法不用看了 

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2、导入Cart组件
import Cart from '@/views/Cart'
?
Vue.use(Router)
?
export default new Router({
? mode: 'history',
? routes: [
? ? {
? ? ? ?? ?path: '/goods',
? ? ? ?? ?name: 'GoodsList',
? ? ? ?? ?component: GoodsList,
? ? ? ?? ?children: [
? ? ? ?? ??? ?{
? ? ? ?? ? ??? ??? ?path: 'title',
? ? ? ? ? ?? ??? ?name: 'title',
? ? ? ? ? ?? ??? ?component:Title?? ?
? ? ? ?? ??? ?},
?
? ? ? ?? ??? ?{
? ? ? ?? ? ??? ??? ?path: 'image',
? ? ? ? ? ?? ??? ?name: 'image',
? ? ? ? ? ?? ??? ?component:Image?? ?
? ? ? ?? ??? ?}
? ? ? ?? ?]
? ? },
? ? // 1、写入购物车组件
? ? {
? ? ?? ?path: '/cart',
? ? ? ?? ?component: Cart,
? ? }
? ]
})

vue跳转到一个新的页面的多种方法

通过router-link或者button或者a链接的方法

1、router-link路由

<router-link :to="{ path: '/a/b' }"
? ? ? ?// tag="button" ?//作为一个按钮，样式得自己再写一下，不方便，请选用第二种方式
? ? ? ? ? >查看当前排名</router-link
? ? ? ? >?

其中/a/b为router路由的路径

2、button按钮 

<el-button type="primary" icon="el-icon-search" @click="querySort"
? ? ? ? ? >查看当前排名</el-button
? ? ? ? >
querySort(){
this.$router.push({ path: "/a/b" });
}

3、a链接

<a :href="exportDistrict" rel="external nofollow"  class="filter-item el-button el-button--success"
? ? ? ? ? >导出游戏区服</a
? ? ? ? >
? ? ?data() { return{ ? exportDistrict: "/a/b",}}

选用哪种方式自己决定；

另：如果在方法中跳转一个页面，比如错误页，使用方法如下：

if (res.code === 1002) {
? ? ? ? //无权限统一处理
? ? ? ? loadPage("/error");
? ? ? ? return;
? ? ? }
? ? ??
// 跳转、重定向
const loadPage = (url, reject) => {
? if (reject) {
? ? return reject(url);
? }
? window.$$vm.$router.push(url);
};

main.js中：

window.$$vm = new Vue({
? el: '#app',
? router,
? store,
? render: h => h(App)
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue如何通过router-link或者button跳转到一个新的页面的详细内容...