1. 程式人生 > >vue全棧商城專案-路由

vue全棧商城專案-路由

根據不同的url地址展示不同的內容或頁面,前端路由就是把不同路由對應不同的內容或頁面的任務交給前端做,之前是通過服務端根據url不同返回不同的頁面實現的。
什麼時候使用?
在單頁面應用,大部分頁面結構不變,只改變部分內容的使用。
前端路由優缺點:
優點:使用者體驗好,不需要每次從伺服器全部獲取
缺點:1.不利於seo 2.使用瀏覽器前進後退的時候會重新請求,沒有合理利用快取
3.單頁面無法記住之前滾動的位置,無法在前進後退時記住滾動條位置

動態路由:


router/index.js:



GoodsList.vue:


效果:


前端路由實際上是對history的封裝 , 在控制檯輸入history.pushState("sss","ddd","/admin"):

傳入goodsId:




巢狀路由:




注意router-link裡的to="/goods/title",跟router/index裡不寫前面的goods有區別。

程式設計式路由:通過js來實現頁面的跳轉:

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)或$router.go(-1) 

第一種方式、



第二種方式、



注意上圖中接收引數的方式


命名路由:





傳入cartId:



相關推薦

vue商城專案-路由

根據不同的url地址展示不同的內容或頁面,前端路由就是把不同路由對應不同的內容或頁面的任務交給前端做,之前是通過服務端根據url不同返回不同的頁面實現的。什麼時候使用?在單頁面應用,大部分頁面結構不變,只改變部分內容的使用。前端路由優缺點:優點:使用者體驗好,不需要每次從伺服

vue商場專案-商品列表頁面

.vue字尾的有元件,有頁面,頁面放在views資料夾,元件放在components資料夾;css檔案匯入:元件匯入:實際上此處的<nav-header>可以匹配nav-header,navHeader,NavHeader;麵包屑元件的slot:slot什麼都不放

你想要的平臺開源專案 - Vue、React、小程式、Android原生、ReactNative、java後端

全平臺全棧開源專案 coderiver 今天終於開始前後端聯調了~ 首先感謝大家的支援,coderiver 在 GitHub 上開源兩週,獲得了 54 個 Star,9 個 Fork,5 個 Watch。 這些鼓勵和認可也更加堅定了我繼續寫下去的決心~ 再次感謝各位大佬! 專案地址: github.co

Node.js+MySQL+Vue實戰專案:星辰筆記

本場 Chat 是一個基於 Node.js 的全棧是實戰專案,目標就是帶領讀者朋友上手實戰。眾所周知全棧工程師是要比純前端有發展前景的,非常希望本篇文章能給朋友們帶來一些收穫。 該實戰專案主要有首頁、登陸、註冊、筆記分類,筆記列表,筆記詳情,釋出筆記和個人主頁八個部分。專案雖小,五臟俱全,設計的知

基於vue-cli網上商城專案實戰開發——搭建一個完整的SPA專案開發框架(一)

基於vue-cli腳手架,結合實際專案經驗,搭建一個完整的SPA專案框架。 安裝vue-cli腳手架 先貼出官方的命令列工具使用方法 官方命令列工具 鑑於此過程比較緩慢,我這裡推薦使用淘寶映象來安裝。依次執行以下步驟 (本人mac,需要sudo獲

Gin + Vue開發實戰(一)

Gin入門   本章概要 Gin簡介 開發第一個Gin程式   1.1 Gin簡介         Gin是用Go語言編寫的一個輕量級Web應用框架,現在在各個公司包括位元組跳動、bilibili等大網際網路公司都得到了廣泛的應用。它有很好的效能

Gin + Vue開發實戰(二)

      嘗試地寫了第一篇自己學習Go Web框架的感受和入門的文章,發現反響還不錯,大家也提出了很多的問題來一起交流。近期也漸漸地出現了很多有關go語言開發的相關文章,包括有在螞蟻金服的大牛的分享,我也一直有在看部落格園和學習,這裡越來越多人的去學習和使用Go,感覺也是非常好

Node+TS+Koa+vue 商城(前後端)開發

課程目錄:1、Node、TS、Koa商城全棧開發遠端課介紹視訊2、Symbol與作用域(1)3、解構賦值與擴充套件運算子(1)4、字串、數字與物件擴充套件(1)5、迭代(1)6、函式擴充套件(1)7、箭頭函式(1)8、集合-Set物件(1)'9、1-let和const;10、2-變數的解構賦值11、

「偽Vue+Node搭建一個商城應用

一個入門級的前後端分離專案,包括前端、後端兩個子專案。前端為基於Vue全家桶的多頁面應用,後端基於Koa2+Sequelize,主要提供API介面。(網站備案中,線上預覽地址暫為非標準埠) 線上預覽 前端原始碼 後端原始碼 專案展示 專案特點 前端

Vue+koa2開發一款小程式(5.服務端環境搭建和專案初始化)

1.微信公眾平臺小程式關聯騰訊雲 騰訊雲的開發環境是給免費的一個後臺,但是隻能夠用於開發,如果用於生產是需要花錢的,我們先用開發環境吧 1.用小程式開發郵箱賬號登入微信公眾平臺 2.【設定】→【開發者工具】→第一次是git管理,開啟騰訊雲關聯 3.會一路跳轉到騰訊雲的【開通開發環境】的流程要走 1.已經完成

Vue+koa2開發一款小程式(服務端環境搭建和專案初始化)

1.微信公眾平臺小程式關聯騰訊雲 騰訊雲的開發環境是給免費的一個後臺,但是隻能夠用於開發,如果用於生產是需要花錢的,我們先用開發環境吧 1.用小程式開發郵箱賬號登入微信公眾平臺 2.【設定】→【開發者工具】→第一次是git管理,開啟騰訊雲關聯 3.會一路跳轉到騰

VueCli3.0專案-資金管理系統帶許可權(node/element/vue)分享及學習心得

VueCli3.0全棧專案-資金管理系統帶許可權(node/element/vue) 免費分享及學習心得 購置了這套教程 吸收了很多的營養 現在免費分享給需要的朋友們 01 VueCli3.0全棧實戰專案-最終成果展示 02 Node介面搭建-express搭建

Vue-book----一個簡單的專案

Vue-book http://www.tuicool.com/articles/7VbymaR A simple full stack project about book~ GitHub 地址 (覺得不錯就給個 star 吧 ^_^) 說明 前端: Vu

Vue、Nuxt服務端渲染,NodeJS專案,面試小白的部落格系統~~

![](https://user-gold-cdn.xitu.io/2020/7/1/1730b15676ec8c32?w=1920&h=1080&f=jpeg&s=181162) Holle,大家好,我是李白!! 一時興起的開源專案,到這兒就告一段落了。 這是一個入門全棧之路的小專案,從設計、

2Python之路系列之Django路由與視圖

request 配置文件 hello 文章 Python全棧之路系列之Django路由與視圖路由說白了就是與視圖(函數)的對應關系,怎麽說呢,一個路由對應一個視圖,比如上面文章中所提到的那樣,當打開/users/路徑的時候會讓users這個函數來進行邏輯處理,把處理的結果再返回到前端。那麽dj

spring boot + vue + element-ui開發入門——windows開發環境

vue-cli 1.4 www mod build bsp pri get brush 一、node.js開發環境 windows系統,去網站https://nodejs.org/en/download/,下載對應的安裝程序,並安裝Windows Instal

spring boot + vue + element-ui開發入門——前後端整合開發

www. 傳統 eap 博客 css 溝通 協調 highlight closed 一、配置 思路是通過node的跨域配置來調用spring boot的rest api。 修改config\index.js文件,設置跨域配置proxyTable:

spring boot + vue + element-ui開發入門——spring boot後端開發

sta true generate mave gif close apach tex 1.8 前言 本文講解作為後端的spring boot項目開發流程,如果您還不會配置spring boot環境,就請點擊《玩轉spring boot——

慕課網 微信服務號+Yii 2.0構建商城系統應用 百度雲網盤分享

div .com alt 商城系統 分享 棧應用 微信 info yii 慕課網 微信服務號+Yii 2.0構建商城系統全棧應用 百度雲網盤分享 慕課網 微信服務號+Yii 2.0構建商城系統全棧應用 百度雲網盤分享

Web前端/核心(html5/css3/js/vue/react/angular/es6/node)觀看筆記

出現 屬性 elf sel ram 新窗口 targe 位置 angular a標簽中的超鏈接,需要加 http:// 否則會出現頁面找不到。 iframe中添加a標簽,a標簽中的target屬性可以控制即將打開的頁面,在那個位置顯示。 _blank