首頁 > web前端 > Vue.js > 主體

vue.js如何引用vue router

coldplay.xixi
發布: 2020-11-12 16:50:13
原創
2286 人瀏覽過

vue.js引用vue router的方法:先安裝npm包,程式碼為【npm install vue-router --save】;然後利用【v-link】這個【directive】。

vue.js如何引用vue router

【相關文章推薦:#vue.js##】

vue.js引用vue router的方法:

安裝##基於傳統,我更喜歡採用npm包的形式進行安裝。

npm install vue-router --save
登入後複製

當然,官方採用了多種方式進行安裝,包括bower,cdn等。

基本用法

在HTML文件中使用,只需要利用

v-link

這個directive就行了,如:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;a v-link=&quot;{path: &amp;#39;/view-a&amp;#39;}&quot;&gt;Go to view-a&lt;/a&gt;</pre><div class="contentsignin">登入後複製</div></div>ps:

v-link

也支援activeClass用於指定連結活躍時的css樣式。 replace屬性為true的時候可以讓連結在跳轉的時候不會留下歷史記錄。 而在ES5中使用,需要先建立路由器實例,然後傳入設定參數即可,如:

var router = new VueRouter();
router.map({
  &#39;/view-a&#39;: {
    component: ViewA
  },
  &#39;/view-b&#39;: {
    component: ViewB
  }
});
router.start(App, &#39;#app&#39;);
登入後複製

以上定義的路由器規則,採用映射到一個元件的方式,最後啟動應用程式的時候,就掛載到#app的元素上。

相關免費學習推薦:
JavaScript

(影片)#

以上是vue.js如何引用vue router的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板