vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面
更新時間：2022年10月12日 10:51:32 作者：chainbees
這篇文章主要介紹了vue如何通過router-link或者button跳轉(zhuǎn)到一個新的頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
通過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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)底部彈窗多選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue組件通信的幾種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個新需求：列表輪播滾動,實現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實現(xiàn),于是我開始了嘗試,但是在這個過程中遇到了動態(tài)綁定style樣式不生效,所以本文介紹了Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue表格n-form中自定義增加必填星號的實現(xiàn)代碼
這篇文章主要介紹了vue表格n-form中自定義增加必填星號,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue中如何給data里面的變量增加屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了基于Vue CSR的微前端實現(xiàn)方案實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue如何實現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗
這篇文章主要介紹了vue如何實現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04