通过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)
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。