<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- vue实现的spa单页面开发,一个项目只有一个html其余的都是组件 -->
<!--
之前使用a的位置,全部换成router-link
-->
<div id="app">
<!-- router-view渲染内容 -->
<ul>
<li>
<!-- router-link实现页面跳转 最终渲染成了a -->
<router-link to='/index'> 首页</router-link>
</li>
<li>
<router-link to='/my'>我的</router-link>
</li>
<li>
<router-link to='/list'> 列表</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<!-- 定义模板 -->
<template id="index">
<h1>这是首页</h1>
</template>
<template id="my">
<h1>这是我的</h1>
</template>
<template id="list">
<h1>这是list</h1>
</template>
<script src="js/vue.js"></script>
<!-- vue-router依赖于vue.js -->
<script src="js/vue-router.js"></script>
<script>
// 定义组件
var index={
template:'#index'
}
var my={
template:'#my'
}
var list={
template:'#list'
}
// 定义路由
var router=new VueRouter({
// 配置路线为每一个路由配置路线。渲染的内容到router-view内部
routes:[
// path对应的是router-link中的to component对应的是组件
{
path:'/index',
component:index
},
{
path:'/my',
component:my
},
{
path:'/list',
component:list
}
]
})
new Vue({
el:'#app',
// 挂载路由
router:router
})
</script>
</body>
</html>
路由嵌套
var router=new VueRouter({
// 配置路线为每一个路由配置路线。渲染的内容到router-view内部
routes:[
// path对应的是router-link中的to component对应的是组件
{
path:'/index',
component:index
},
{
path:'/my',
component:my
},
{
path:'/list',
component:list,
// 配置子路由 list组件内部一定要有router-view.如果没有router-view不会渲染
// children:[
// {
// path:'/phone',
// component:phone
// }
// ]
},
// 虽然phone是子路由,但是配置在第一层路由下,内容会渲染到第一层router-view内部
{
path:'/phone',
component:phone
}
]
})