Vue2.x路由的步驟
阿新 • • 發佈：2018-05-01
ews type lin 參數 meta html outer doc 新聞
創建路由步驟：
1.引入vue-router庫，可用最新版https://unpkg.com/vue-router
2.創建所需要的組件
3.創建router實例對象
4.在根實例中註冊一下 =》方式：router:router
實例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<title>組件化</title>
</head>
<body>
<div id="box">
<router-link to="/home">主頁</router-link>
<router-link to="/news">新聞</router-link>
<hr />
<router-view></router-view>
</div>
<template id="home">
<div>
<bbb></bbb>
<p>{{msg}}</p>
</div>
</template>
<template id="news">
<div>
<bbb></bbb>
<p>{{msg}}</p>
</div>
</template>
<template id="bbb">
<div>
<h1>模板</h1>
</div>
</template>
<script>
//1.創建組件
var Home=Vue.extend({
template:"#home",
data(){
return { msg:"我是主頁模板" };
},
components:{
‘bbb‘:{
template:"#bbb"
}
}
});
var News=Vue.extend({
template:"#news",
data(){
return { msg:"我是新聞模板" };
},
components:{
‘bbb‘:{
template:"#bbb"
}
}
});
//2.創建Router實例對象
var router=new VueRouter(
{
routes:[
{path:"/home",component:Home},
{path:"/news",component:News}
]
}
);
//3.創建根實例對象，通過路由配置參數註入路由，讓整個應用都有相應的路由地址
var vm=new Vue({
router:router
}).$mount("#box");
</script>
</body>
</html>
Vue2.x路由的步驟