vuejs之路由應用之一

来源:https://www.cnblogs.com/qietu/archive/2019/11/27/11943121.html
-Advertisement-
Play Games

什麼是‘路由’,路由相當於一個映射,一個url地址對應一個組件,當url地址A變為url地址B,那麼對應地址A的組件就會改變為對應地址B的組件。應用於spa,即:單頁應用,url地址改變,它不會跳轉頁面,只會用url對應的模塊取代上一個url對應的模塊,始終都在一個頁面操作。取代了傳統的多頁應用。值 ...


什麼是‘路由’,路由相當於一個映射,一個url地址對應一個組件,當url地址A變為url地址B,那麼對應地址A的組件就會改變為對應地址B的組件。應用於spa,即:單頁應用,url地址改變,它不會跳轉頁面,只會用url對應的模塊取代上一個url對應的模塊,始終都在一個頁面操作。取代了傳統的多頁應用。值得高興的是,雖然,都在一個頁面進行操作,但是瀏覽器的‘前進’,'後退'都可以正常使用。

路由的使用步驟:1:安裝路由  npm i vue-router --save 

2:引入模塊:

import Router from 'vue-router'

import Vue from 'vue'  import Home from '插件路徑'

3:作為Vue的插件:

Vue.use(Router)

4:實例化路由:

let router=new Router({ routes:[{path:'/',component:'Home'}]);

5:default export router

註意:2,3,4步驟都寫在router/index.js頁面,以後需要添加新的view視圖都可以在該頁面配置對應的路由  

6 :告訴路由渲染的位置:<router-view></router-view>

7:在main.js中導入路由模塊

import Vue from 'vue'

import App from '路徑'

import router from './router'

new Vue({

el:'#app',

router,

template:'<App/>',

components:{App}

)}


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML DOM 學習 By: Mirror王宇陽 E mail:[email protected] 博客主頁:https://www.cnblogs.com/wangyuyang1016/ DOM 文檔對象模型 DOM簡單來說就是文檔對象模型,當一個HTML頁面被載入就會創建HTML頁面的DOM ...
  • DOM遍歷 parent()方法返回所選元素的直接父元素。(parent() 只能遍歷單個級別的 DOM樹) parents()方法獲取所選元素的所有祖先 children()所選元素的所有直接子元素 siblings()所有兄弟元素 next()/nextAll()下一個兄弟元素/下麵所有兄弟元素 ...
  • // 線性漸變,多用於折線柱形圖,前四個參數分別是 x0, y0, x2, y2, 範圍從 0 - 1,相當於在圖形包圍盒中的百分比,如果 globalCoord 為 `true`,則該四個值是絕對的像素位置 color: { type: 'linear', x: 0, // 左上角x y: 0, ...
  • 摘要 由於需要用到彈出層但是懶得造輪子所以使用vant 介紹 使用的node包管理器為yarn vue-cli版本4 rem計算方式為index.html的js腳本計算 安裝vant yarn add vant 配置 安裝babel-plugin-import實現按需載入 yarn add babe ...
  • let option = { backgroundColor: '#1a4377', animationDurationUpdate: 1500, // 動畫更新變化時間 animationEasingUpdate: 'quinticInOut', // 動畫緩動效果 series: [ { typ ...
  • HTML: click <a>,add active class, and remove other a's active class: a is an array, as: and a[1]: value of a[1]'s id attribute: $(a[1]).attr['id'] , w ...
  • js是單線程的,為什麼可以執行非同步操作呢? 這歸結與瀏覽器(js的宿主環境)通過某種方式使得js具備了非同步的屬性。 區分進程和線程: 進程:正在運行中的應用程式。每個進程都自己獨立的記憶體空間。例如:打開的瀏覽器就是一個進程。 線程:進程的子集,是獨立的。線程在共用的記憶體空間中運行。 瀏覽器是多進程的 ...
  • 由於項目中難免會碰到需要實時刷新,無論是獲取簡訊碼,還是在支付完成後輪詢獲取當前最新支付狀態,這時就需要用到定時器。但是,定時器如果不及時合理地清除,會造成業務邏輯混亂甚至應用卡死的情況,這個時就需要清除定時器。某個頁面中啟動定時器後,一定要在頁面關閉時將定時器清除掉。即在頁面卸載(關閉)的生命周期 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...