Vue.js之路由

来源:https://www.cnblogs.com/jin-zhe/archive/2018/01/19/8317657.html
-Advertisement-
Play Games

Vue.js之路由 以前的跳轉都是使用a標簽,a標簽里有一個屬性叫href,給他一個對應的網路地址或者一個路徑的話,它就會幫助跳轉到對應的頁面。 Vue.js的路由,其實跟我們的a標簽實現的功能是一樣的,我們也是實現一個對應的跳轉,只不過路由的性能更優化,a標簽不管點擊多少次,都會發生對應的網路請求 ...


Vue.js之路由

 

  以前的跳轉都是使用a標簽,a標簽里有一個屬性叫href,給他一個對應的網路地址或者一個路徑的話,它就會幫助跳轉到對應的頁面。

  Vue.js的路由,其實跟我們的a標簽實現的功能是一樣的,我們也是實現一個對應的跳轉,只不過路由的性能更優化,a標簽不管點擊多少次,都會發生對應的網路請求,頁面會不停地進行頁面刷新,但是路由不一樣,只要使用路由機制的話,你只要點擊之後,他不會出現我們的請求以及頁面刷新,直接就轉換到你要去的地址,這是我們使用路由的好處。

  要使用路由,需要先安裝路由模塊,在IDE的Terminal中輸入這句話: npm install vue-router --save-dev 來安裝。
  安裝路由模塊以後就可以在項目里使用路由了。


  使用路由首先要在main.js當中進行設置,通過 import VueRouter from 'vue-router' 將我們的路由模塊先引進來,然後在下麵通過 Vue.use(VueRouter) 使用一下引用進來的模塊。
  使用路由以後就可以在下麵進行配置路由了:

1 const router = new  VueRouter({
2   routes:[
3     {path:'/',component:Home},
4     {path:'/helloworld',component:HelloWorld}
5   ],
6   mode:"history"
7 })

  path是要路由的地址,component是抓取到地址後要跳轉到的組件。這裡要跳轉到的組件也要在main.js中引入. 

 例如: import HelloWorld from './components/HelloWorld' 和 import Home from './components/Home' 

 

一個小demo

 

  main.js文件:

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 import App from './App'
 4 import HelloWorld from './components/HelloWorld'
 5 import Home from './components/Home'
 6 
 7 Vue.config.productionTip = false
 8 Vue.use(VueRouter)
 9 
10 //配置路由
11 const router = new  VueRouter({
12   routes:[
13     {path:'/',component:Home},
14     {path:'/helloworld',component:HelloWorld},
15   ],
16   mode:"history"
17 })
18 
19 new Vue({
20   router,
21   el: '#app',
22   components: { App },
23   template: '<App/>'
24 })

  要在路由中加 mode:”history“ ,否則項目地址會多出 localhost:8080/#/ ,會影響我們項目的功能。

  Home.vue文件:

 1 <!--模板-->
 2 <template>
 3   <div id="home">
 4     <app-header @titleChanged="updateTitle($event)" :title="title"></app-header>
 5     <users :users="users"></users>
 6     <app-footer></app-footer>
 7   </div>
 8 </template>
 9 
10 <!--行為-->
11 <script>
12   //局部註冊組件
13   import Users from './Users'
14   import Header from './Header'
15   import Footer from './Footer'
16 
17   export default {
18     name: 'home',
19     data(){
20       return {
21         users:[
22           {name:"Henry",Position:"Java工程師",show:false},
23           {name:"Lily",Position:"Java工程師",show:false},
24           {name:"Kang",Position:"Java工程師",show:false},
25           {name:"Henry",Position:"Java工程師",show:false},
26           {name:"Henry",Position:"Java工程師",show:false}
27         ],
28         title:"這是一個title!"
29       }
30     },
31     methods:{
32       updateTitle:function (title) {
33         this.title = title;
34       }
35     },
36     components:{
37       "users":Users,
38       "app-header":Header,
39       "app-footer":Footer
40     }
41 
42   }
43 </script>
44 
45 <!--樣式-->
46 <style >
47 
48   h1{
49     color: pink;
50   }
51 </style>

 

HelloWorld.vue文件:

 1 <template>
 2   <div class="hello">
 3       hello,world!
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'HelloWorld',
10   data () {
11     return {
12     }
13   }
14 }
15 </script>
16 
17 <!-- Add "scoped" attribute to limit CSS to this component only -->
18 <style scoped>
19 
20 </style>

  Header.vue文件:

 1 <template>
 2   <header @click="changeTitle">
 3     <h1>{{title}}</h1>
 4   </header>
 5 </template>
 6 
 7 <script>
 8   export default {
 9     name: 'app-header',
10     data () {
11       return {
12         title1:"Vue.js Demo"
13       }
14     },
15     props:{
16       title:{
17         type:String
18       }
19     },
20     methods:{
21       changeTitle:function(){
22         this.$emit("titleChanged","子向父組件傳值");
23       }
24     }
25   }
26 </script>
27 
28 <style scoped>
29 header{
30   background: pink;
31   padding: 10px;
32 }
33 h1{
34   color: #222;
35   text-align: center;
36   }
37 </style>

  Footer.vue文件:

 1 <template>
 2   <footer>
 3     <p>{{copyright}}</p>
 4   </footer>
 5 </template>
 6 
 7 
 8 <script>
 9   export default {
10     data () {
11       return {
12         copyright:"Copyright 2018 Vue Demo"
13       }
14     }
15   }
16 </script>
17 
18 <style scoped>
19   footer{
20     background: #666;
21     padding: 6px;
22   }
23   footer p{
24     color: pink;
25     text-align: center;
26   }
27 </style>

  User.vue文件:

 1 <template>
 2   <div class="users">
 3     <ul>
 4       <li v-for="user in users"
 5           @click="user.show = !user.show">
 6         <h2 >{{user.name}}</h2>
 7         <h3 v-show="user.show">{{user.Position}}</h3>
 8       </li>
 9     </ul>
10   </div>
11 </template>
12 
13 <script>
14   export default {
15     name: 'users',
16     // props:['users']
17     props:{
18       users:{
19         type:Array,
20         required:true
21       }
22     }
23   }
24 </script>
25 
26 <style scoped>
27 .users{
28   width: 100%;
29   max-width: 1200px;
30   margin:40px auto;
31   padding: 0 20px;
32   box-sizing: border-box;
33 }
34 ul{
35    display: flex;
36   flex-wrap: wrap;
37   list-style-type: none;
38   padding: 0;
39   }
40 li{
41   flex-grow: 1;
42   flex-basis: 200px;
43   text-align: center;
44   padding: 30px;
45   border: 1px solid #666;
46   margin: 10px;
47 }
48 </style>

  然後在App.vue文件中加入導航;

App.vue文件:

 1 <!--模板-->
 2 <template>
 3   <div id="app">
 4     <ul>
 5       <li><a href="/">Home</a></li>
 6       <li><a href="/helloworld">Hello</a></li>
 7       <li> <router-link to="/">Home</router-link> </li>
 8       <li> <router-link to="/helloworld">Hello</router-link> </li>
 9     </ul>
10     <router-view></router-view>
11   </div>
12 </template>
13 <!--行為-->
14 <script>
15 
16 export default {
17   name: 'App',
18   data(){
19     return {
20     }
21   },
22   methods:{
23   }
24 }
25 </script>
26 <!--樣式-->
27 <style >
28 
29 </style>


  這裡如果使用 <a href=""></a> 標簽,點擊時候會跳轉和刷新頁面,而使用路由 <router-link to=""></router-link> 則不會,to跟a標簽里的href是一樣的.

 


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

-Advertisement-
Play Games
更多相關文章
  • xss攻擊(跨站腳本) 是網站應用程式的安全泄露攻擊,是代碼註入的一種。它允許惡意用戶將代碼註入到網頁上,其他用戶在觀看網頁時就會受到影響。 攻擊原理 其特點是不對伺服器端造成任何傷害,而是通過一些正常的站內交互途徑,例如發佈評論,提交含有 JavaScript 的內容文本。這時伺服器端如果沒有過濾 ...
  • 前端框架層出不窮,不過萬變不離其宗,就是從MVC過渡到MVVM。從數據映射到DOM,angular中用的是watcher對象,vue是觀察者模式,react就是state了。 React通過管理狀態實現對組件的管理,通過this.state()方法更新state。當this.setState()被調 ...
  • 在網上找了好久針對react-native的測試方法,但是沒有找到靠譜的方式。要麼很淺只是跑了一下官方的例子,要麼就是版本有點老舊,照著無法進行。jest提供的react-native例子很少,而enzyme提供的react-native-mock庫也是各種報錯,讓人很是絕望。於是乎在搜索到的信息指 ...
  • 屬性 屬性名 屬性類型 描述說明 預設值 language String 多語言設置,使用時需提前引入\locales文件夾下對應的語言文件,中文zh,引入語言文件必須放在fileinput.js之後 'en' showCaption Boolean 是否顯示被選文件的簡介 true showBro ...
  • Skip to content This repository Search Pull requests Issues Marketplace Explore @VIVI863628 Sign out Unwatch 1 Star 0 Fork 0 VIVI863628/PouchDB Code I... ...
  • JavaScript數組去重 1、原型去重法。通過prototype找到數組的源性對象Array,在數組的原型上添加unique()方法。需要使用的時候使用 點 “ . ” 進行連接。 優點:擴展性比較高,復用性比較高。 缺點:通過給數組對象擴展,新增方法,導致數組結構中有新增了一個方法。此時如果用 ...
  • 個人JavaScript小工具,每天熟記一點點。多練習,達到熟練的效果。 ...
  • 閉包算是javascript中一個比較難理解的概念,想要深入理解閉包的原理,首先需要搞清楚其他幾個概念: 一、棧記憶體和堆記憶體 學過C/C++的同學可能知道,電腦系統將記憶體分為棧和堆兩部分(大學的基礎課,忘掉的趕緊重新撿起來)。 棧記憶體(連續的存儲空間,類似數據結構中的棧):主要用來存放數值、字元、 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...