1.<script src="../vue/vue-router.js"></script>
<!-- 加载进路由-->//在首页中声明
<router-view>...</router-view>//路由加载区
<template>
<div>首页</div>
<div>...内容...</div>
</template>
<script>
var vName=new Vue({
})
</script>2.声明一个路由实例
var router=new VueRouter({
routes:[
{
path:"/", //路径(首页)
component：{
template：" #home", //模板
}//组件
}
]
})
3.router-view
4.router-link
<router-link to="/"></router-link>5.路由路径
{
path:"/",
},
{
path:"/secPage",
}
//作用于<router-view>里
<script src="../vue/vue.js"></script>
<script src="../vue/vue-router.js"></script>
//------------------------------------------------------
<body>
<div class="container" id="app">
<!--路由加载的区域-->
<div>
<div>
<!-- 7.路由导航-->
<router-link to="/">首页</router-link>
<router-link to="/list">列表</router-link>
</div>
<router-view>路由加载区域</router-view>
</div>
</div>
<!-- 5.模版内容-->
<template id="home">
<div>
<h1>首页</h1>
<p>这是首页页面</p>
</div>
</template>
<template id="list">
<div>
<h1>列表</h1>
<p>这是列表页面</p>
</div>
</template>
</body>
//------------------------------------------------------
<script>
//1.声明一个路由实例
var Rrouter=new VueRouter({
//2.建立路由
routes:[
{
path:"",//3.路径：为空，为首页
//4.建立组件
component:{
template:"#home"
}
},
{
path:"/list",//3.路径：为空，为首页
//4.建立组件
component:{
template:"#list"
}
},
]
})
var vName = new Vue({
//6.路由加载到实例中
router:Rrouter,//Rrouter路由名称
el: '#app',
data: {}
})
</script>
2731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
