vue 路由用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/vue-rute.js" ></script>
</head>
<body>
<div class="" id="app">
<div id="" class="list-group">
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/home">home</router-link>
<br />
<router-link to="/home1">home1</router-link>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
<!--定義模版-->
<template id="child1">
<div>
{{data}}
</div>
</template>
<template id="child2">
<div>
{{data}}
</div>
</template>
</body>
<script type="text/javascript" charset="utf-8">
//這是vue2的路由用法，vue1的map方法不支持
//創建組件一
var Child=Vue.extend({
template:"#child1",
data:function(){
return{
data:"child1數據"
}
}
})
//創建組件2
var Child1=Vue.extend({
template:"#child2",
data:function(){
return{
data:"child2數據"
}
}
})
//配置路由
var routes=[
{
path: ‘/‘,
component: Child//默認顯示home
},
{
path:"/home",
component:Child
},
{
path:"/home1",
component:Child1
},
]
//生成路由實例
var router=new VueRouter({
routes
});
//掛載路由
var vm=new Vue({
el:"#app",
router
})
</script>
</html>
vue 路由用法