Vue.js + vue-router 可以很簡(jiǎn)單的實(shí)現(xiàn)單頁(yè)應(yīng)用。

<router-link>?是一個(gè)組件，該組件用于設(shè)置一個(gè)導(dǎo)航鏈接，切換不同 HTML 內(nèi)容。?to?屬性為目標(biāo)地址， 即要顯示的內(nèi)容。

以下實(shí)例中我們將 vue-router 加進(jìn)來，然后配置組件和路由映射，再告訴 vue-router 在哪里渲染它們。代碼如下所示：

?

HTML代碼：

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 組件來導(dǎo)航. --><!-- 通過傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view> </div>

JS代碼：

/* 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter) *//* 1. 定義（路由）組件工程化后可以從其他文件 import 進(jìn)來*/var Foo = { template: '<div>foo</div>' }var Bar = { template: '<div>bar</div>' }/*2. 定義路由每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器（選講，了解即可），或者，只是一個(gè)組件配置對(duì)象。晚點(diǎn)再討論嵌套路由（選講，了解即可）。*/var routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]/*3. 創(chuàng)建 router 實(shí)例然后傳 `routes` 配置，還可以傳別的配置參數(shù), 先這么簡(jiǎn)單著吧*/var router = new VueRouter({routes:routes // 可以（縮寫）為routes })/*4. 創(chuàng)建和掛載根實(shí)例。記得要通過 router 配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能*/var routeArea = new Vue({router:router}).$mount('.routeArea')

?

?

.

轉(zhuǎn)載于:https://www.cnblogs.com/jianxian/p/10650557.html

總結(jié)

以上是生活随笔為你收集整理的单页vue路由router的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。