vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面
更新時(shí)間：2022年10月12日 10:51:32 作者：chainbees
這篇文章主要介紹了vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
通過router-link或者button跳轉(zhuǎn)到一個新的頁面
a、商品列表頁面如下（點(diǎn)擊'跳轉(zhuǎn)到購物車頁面'就會跳到一個新的頁面，而不是在同一個頁面加載一個組件）
<template> ? <div> ? ? 這是商品列表頁面 ? ? <router-link to='/goods/title'>顯示商品標(biāo)題</router-link> ? ? <router-link to='/goods/image'>顯示商品圖片</router-link> ? ? // 跳轉(zhuǎn)到購物車頁面 ? ? <router-link to='/cart'>跳轉(zhuǎn)到購物車頁面</router-link> ? ? ?<button @click="jump">Button-跳轉(zhuǎn)到購物車頁面</button> ? ? <div> ? ? ? ? <router-view></router-view> ? ? </div> ? </div> </template>
<script>
export default {
? data(){
? ? return{
? ? ? msg: ''
? ? }
? },
? methods: {
? ? jump(){
? ? //this.$router.push("/cart")
? ? //傳遞的參數(shù)用{{ $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、導(dǎo)入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跳轉(zhuǎn)到一個新的頁面的多種方法
通過router-link或者button或者a鏈接的方法
1、router-link路由
<router-link :to="{ path: '/a/b' }"
? ? ? ?// tag="button" ?//作為一個按鈕，樣式得自己再寫一下，不方便，請選用第二種方式
? ? ? ? ? >查看當(dāng)前排名</router-link
? ? ? ? >?其中/a/b為router路由的路徑
2、button按鈕
<el-button type="primary" icon="el-icon-search" @click="querySort"
? ? ? ? ? >查看當(dāng)前排名</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"
? ? ? ? ? >導(dǎo)出游戲區(qū)服</a
? ? ? ? >
? ? ?data() { return{ ? exportDistrict: "/a/b",}}選用哪種方式自己決定；
另：如果在方法中跳轉(zhuǎn)一個頁面，比如錯誤頁，使用方法如下：
if (res.code === 1002) {
? ? ? ? //無權(quán)限統(tǒng)一處理
? ? ? ? loadPage("/error");
? ? ? ? return;
? ? ? }
? ? ??
// 跳轉(zhuǎn)、重定向
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)
})以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3如何使用ref獲取元素，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
element-ui vue input輸入框自動獲取焦點(diǎn)聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動獲取焦點(diǎn)聚焦方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue 項(xiàng)目@change多個參數(shù)傳值多個事件的操作
這篇文章主要介紹了vue 項(xiàng)目@change多個參數(shù)傳值多個事件的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了vue3如何獲取綁定頁面dom元素問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue實(shí)現(xiàn)導(dǎo)入Excel功能步驟詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)入Excel功能,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了淺談Vue.js 中的 v-on 事件指令的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這么做會使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11