您现在的位置是:网站首页> 编程资料编程资料
vue如何通过router-link或者button跳转到一个新的页面_vue.js_
2023-05-24
370人已围观
简介 vue如何通过router-link或者button跳转到一个新的页面_vue.js_
通过router-link或者button跳转到一个新的页面
a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)
这是商品列表页面显示商品标题 显示商品图片 // 跳转到购物车页面跳转到购物车页面
b、通过
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路由
查看当前排名
其中/a/b为router路由的路径
2、button按钮
查看当前排名 querySort(){ this.$router.push({ path: "/a/b" }); }
3、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) })以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- vue3中setup语法糖下通用的分页插件实例详解_vue.js_
- vue如何实现路由跳转到外部链接界面_vue.js_
- 微信小程序引入map组件并在地图上标点的实现代码_javascript技巧_
- vue如何通过router-link或者button跳转到一个新的页面_vue.js_
- vue3中setup语法糖下通用的分页插件实例详解_vue.js_
- vue如何实现路由跳转到外部链接界面_vue.js_
- input输入框限制只能输入数字的方法实例(个人认为最好的)_javascript技巧_
- vue background-image 不显示问题的解决_vue.js_
- input输入框限制只能输入数字的方法实例(个人认为最好的)_javascript技巧_
- JavaScript利用canvas实现鼠标跟随特效_javascript技巧_
