vue-router的基本使用和配置

来源:https://www.cnblogs.com/jonathan102/archive/2018/11/04/9905175.html
-Advertisement-
Play Games

本篇文章主要介紹了Vue學習筆記之vue-router的基本使用和配置,具有一定的參考價值,有興趣的可以瞭解一下。 ...


1.在main.js文件中引入相關模塊以及組件及實例化vue對象配置選項路由及渲染App組件 預設設置如下:

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router/index.js'  // 引入路由
 4 Vue.config.productionTip = false
 5 
 6 /* eslint-disable no-new */
 7 new Vue({
 8   el: '#app',
 9   router, // 在掛載點中註入vue
10   components: { App },
11   template: '<app/>'
12 })

 

2.自定義配置路由路徑,在src 下 router/index.js 文件中配置路由路徑

 1 import Vue from 'vue'
 2 import Router from 'vue-router'  // 引入vue-router
 3 
 4 // 引入要跳轉的vue組件
 5 import Manage from '@/page/admin/Manage'
 6 import userList from '@/page/admin/userList'
 7 import addUser from '@/page/admin/addUser'
 8 import shopList from '@/page/admin/shopList'
 9 import addShop from '@/page/admin/addShop'
10 
11 Vue.use(Router)  // 在vue中註入Router
12  // 配置路由路徑
13 const routes =[
14   {
15           path: '/',
16           name: 'Login',
17           component: Login  // 需要跳轉的組件
18         },
19         {
20           path: '/Manage',
21           name: 'Manage',
22           component: Manage,
23           children: [{
24             path: '/userList',
25             component: userList,
26             meta: ['數據管理', '用戶列表']
27           },
28           {
29             path: '/shopList',
30             component: shopList,
31             meta: ['數據管理', '商品列表']
32           },
33           {
34             path: '/addUser',
35             component: addUser,
36             meta: ['添加數據', '添加用戶']
37           },
38           {
39             path: '/addShop',
40             component: addShop,
41             meta: ['添加數據', '添加商品']
42           }
43         ]
44         },
45     
46         {
47           path: '/home',
48           name: 'Home',
49           component: Home
50         },
51         {
52           path: '/helloworld',
53           name: 'Home',
54           component: HelloWorld
55         }
56 ]
57 // 將路徑註入到Router中
58 var router=new Router({
59   'mode': 'history',
60   routes
61 })
62 // 導出路由
63 export default router;

 

3.在頁面中使用路由

在vue-router中, 我們也可以看到它定義了兩個標簽<router-link> 和<router-view>。<router-link> 就是定義根據某個路徑跳到某個組件的標簽,<router-view> 就是點擊後,組件顯示內容的標簽。所以 <router-link> 還有一個非常重要的屬性 to, 它定義點擊之後,要到哪個路徑下 , 如:<router-link  to="/home">Home</router-link>。

 


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

-Advertisement-
Play Games
更多相關文章
  • 有很多學習大數據的朋友,在初期學習時,通常會對如何學習而感到迷茫。我經常收到零基礎的朋友關於如何入門、如何規劃學習大數據、大數據的學習流程是什麼的一些問題。今天我就粗淺的總結幾點學習大數據方法。 一、興趣建立 興趣是可以讓一個人持續關註一個事物的核心動力,那麼興趣的培養就非常重要了。如果你把寫程式單 ...
  • 1、CONCAT(str1,str2,...) 返回來自於參數連結的字元串。如果任何參數是NULL,返回NULL。可以有超過2個的參數。一個數字參數被變換為等價的字元串形式。 select CONCAT('My', 'S', 'QL');--'MySQL' select CONCAT('My', N ...
  • 一.概述 在sql server里臨時表存儲在TempDB庫中,TempDB是一個系統資料庫,它只有Simple恢復模式,也是最小日誌記錄操作。主要用於存放局部臨時表,全局臨時表,表變數,都是基於臨時特征,每次伺服器或服務重啟後,都會按照Model庫的配置重新創建TempDB庫。在sql serve ...
  • https://www.bilibili.com/video/av27255821/ ...
  • 轉載請註明出處:https://www.cnblogs.com/Joanna-Yan/p/9896180.html 需求:設備傳回伺服器的軌跡點,需要在web地圖上顯示。包括畫坐標點覆蓋物、軌跡路線圖。當數據量達到一定量時,界面出現卡頓。問題出現幾天前端人員都未解決。 第一反應,大量的覆蓋物肯定不能 ...
  • 在學習ant-desin過程中,發現很多知識都不清楚,從現在開始,每天將自己學習到的知識進行一個總結記錄,前端大佬勿擾勿噴。先介紹幾個基礎概念和一些常用命令: 1、什麼是腳手架 我們經常在各個博客論壇下看到腳手架這個名詞,那什麼是腳手架呢。看到很多前輩們的說法之後,腳手架就相當於預定義的一套模板環境 ...
  • 在Redux中常要管理非同步操作,目前社區流行的有Redux Saga、Redux thunk等。在管理複雜應用時,推薦使用Redux Saga,它提供了用 generator 書寫類同步代碼的能力。 在講解 ReduxSaga 前,先要說明一下 Redux Middleware 的概念。 Middl ...
  • 時間對象方法 獲取當前時間的毫秒數 1.var timestamp = Date.parse(new Date()); 2.var timestamp = (new Date()).valueOf(); 3.var timestamp=new Date().getTime(); 4.Date.now ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...