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