vue中SPA单页面应用程序详解
程序员文章站
2022-07-06 21:06:14
一、spa的概述
spa（single page application）单页面应用程序，在一个完成的应用或者站点中，只有一个完整的html页面，这个页面有一个容器，可以...
一、spa的概述
spa（single page application）单页面应用程序，在一个完成的应用或者站点中，只有一个完整的html页面，这个页面有一个容器，可以把需要加载的代码片段插入到该容器中。
spa的工作原理：
eg: http://127.0.0.1/index.html#/start
①根据地址栏中url解析完整的页面：index.html
加载index.html
②根据地址栏中url解析#后的路由地址： start
根据路由地址，去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址
发起异步请求加载该页面地址
③把请求来的数据加载到指定的容器中
二、通过vuerouter来实现一个spa的基本步骤
①引入对应的vue-router.js(该文件我已经上传到我的文件中)
②指定一个盛放代码片段的容器
<router-view></router-view>
③创建业务所需要的各个组件
④配置路由词典
每一个路由地址的配置对象（要加载哪个页面...）
const myroutes = [
{path:'/mylogin',component:testlogin},
{path:'/myregister',component:testregister}
]
const myrouter = new vuerouter({
routes:myroutes
})
new vue({
router:myrouter
})
⑤测试
在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testlogin = vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
</div>
`
})
var testregister = vue.component("register",{
template:`
<div>
<h1>这是我的注册页面</h1>
</div>
`
})
//配置路由词典
//对象数组
const myroutes =[
//当路由地址：地址栏中的那个路径是mylogin访问组件
//组件是作为标签来用的所以不能直接在component后面使用
//要用返回值
//path:''指定地址栏为空：默认为login页面
{path:'',component:testlogin},
{path:'/mylogin',component:testlogin},
{path:'/myregister',component:testregister}
]
const myrouter = new vuerouter({
//myroutes可以直接用上面的数组替换
routes:myroutes
})
new vue({
router:myrouter,
//或者：
/*
router:new vuerouter({
routes:[
{path:'/mylogin',component:testlogin},
{path:'/myregister',component:testregister}
]
})
*/
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>spa练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<router-view></router-view>
</div>
<script>
/*
需要大家创建一个spa，这个spa有3个组件，分别对应的是collect/detail/order
功能需求：
在地址栏中路由地址是:
/mycolllect --> 收藏页组件
/mydetail --> 详情页组件
/myorder --> 订单页组件
*/
/*
1、引入js文件
2、创建三个组件,需要返回值
3、路由词典配置(三小步)const myroutes、const myrouter、router:myrouter,
4、指定一个盛放代码片段的容器
<router-view></router-view>
*/
var testcollect = vue.component("collect",{
template:`
<div>
<h1>这是收藏页</h1>
</div>
`
})
var testdetail = vue.component("detail",{
template:`
<div>
<h1>这是详情页</h1>
</div>
`
})
var testorder = vue.component("order",{
template:`
<div>
<h1>这是订单页</h1>
</div>
`
})
const myroutes = [
{path:"",component:testcollect},
{path:"/mycolllect",component:testcollect},
{path:"/mydetail",component:testdetail},
{path:"/myorder",component:testorder},
]
const myrouter = new vuerouter({
routes:myroutes
})
new vue({
router:myrouter,
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 微信小程序 按钮滑动的实现方法