多页面应用程序存在的问题
- 页面间通信比较复杂。
- get传参
- 共享变量
- 页面状态不好保留。
- 界面会刷新
SPA单页面
作用: 一个页面不需要传参, 好控制
例如 音乐播放器 播放音乐时查看歌词, 可以保留状态, 不需要切换页面,
更容易模块化
把MVC放到一块。
路由的作用
路由的实现
路由模板代码。
- 根据url锚点路径，在容器中加载不同的模块。
- 锚点不会刷新页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/index", component:{}},
{path:"/m1", component:{}}
]
})
});
</script>
</body>
</html>
路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<body>
<div id="app">
<ul>
<li>m1</li>
<li>m2</li>
</ul>
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/index", component:{
template: "<div>index</div>"
}},
{path:"/m1", component:{
template: "<div>m1</div>"
}},
{path:"/m2", component:{
template: "<div>m2</div>"
}}
]
})
});
</script>
</body>
</html>
使用路由
- 如何路由：修改url
- /路径
- 使用路由router-link代替标签
- <a href="#/index" ></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/m1">m1</router-link></li>
<li><router-link to="/m2">m2</router-link></li>
<a href="#/m1">m1</a>
</ul>
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/index", component:{
template: "<div>index</div>"
}},
{path:"/m1", component:{
template: "<div>m1</div>"
}},
{path:"/m2", component:{
template: "<div>m2</div>"
}},
{path:"/", component:{
template: "<div>default</div>"
}}
]
})
});
</script>
</body>
</html>
重定向
{path:"/", redirect:"/index"}
参数
- 定义参数
- 传递参数
- 获取参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/details/1">歌单1</router-link></li>
<li><router-link to="/details/2">歌单2</router-link></li>
</ul>
<router-view></router-view>
</div>
<script>
var vm = new Vue({
el:"#app",
router: new VueRouter({
routes:[
{path:"/index", component:{
template: "<div>index</div>"
}},
{path:"/details/:id", component:{
template: "<div>details: {{$route.params.id}}</div>"
}}
]
})
});
</script>
</body>
</html>
传递多个参数
- 参数要完全匹配
- 使用重定向设置默认参数
变量改变多个页面的 切换
模块的概念
概念
- 模块记载
- url地址产生模块加载 作业 ES6语法
准备四个不同的 模块
通过url加载不同的模块
var vm = new Vue({
el: '#app',
data: {}
router: new VueRouter({
routes: [
path:'home/',compontent :Home,
]
})
})
标签
router-view 内置组件
router-link