溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“怎么使用vue-router實現(xiàn)單頁面路由”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用vue-router實現(xiàn)單頁面路由”文章吧。
vue中，有一個類庫叫做vue-router，是用來做單頁面路由的。做路由一般分為四個步驟：
準(zhǔn)備一個根組件 vue.extend()；
需要做路由的內(nèi)容準(zhǔn)備 template；
準(zhǔn)備路由 new VueRouter（）；
關(guān)聯(lián)路由 map
啟動路由 start(App,'#box')；//第一個參數(shù)是準(zhǔn)備的根組件，第二個參數(shù)是要捆綁的位置就是自己定義的id中
關(guān)于路由跳轉(zhuǎn)的簡單代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<title></title>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">我是第一個a</a>
</li>
<li >
<a v-link="{path:'news'}">我是第二個a</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</body>
<script>
//1.準(zhǔn)備一個根組件
var App=Vue.extend();
//2.Home News 組件準(zhǔn)備
var Home=Vue.extend({
template:'<h4>我是第一個a的內(nèi)容頁</h4>'
});
var News=Vue.extend({
template:'<h4>我是第二個a的內(nèi)容頁</h4>'
})
//3.準(zhǔn)備路由
var router = new VueRouter();
//4.關(guān)聯(lián)
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5.啟動路由
router.start(App,'#box');
</script>
</html>Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
以上就是關(guān)于“怎么使用vue-router實現(xiàn)單頁面路由”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼