目录
SPA(Single Page Application) 单页面应用
1. 单页面应用与多页面应用对比
2. 单页面应用步骤
3. SPA路由跳转
SPA(Single Page Application) 单页面应用
单页面是指整个应用程序只有一个唯一完整的 HTML 页面,而其它所谓的页面,其实都是组件片段而已,切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。
1. 单页面应用与多页面应用对比
2. 单页面应用步骤
(1)先创建唯一完整的 HTML 页面(一个支持 vue 基本结构的空页面)
<script src="js/vue.js"><body><div id="app"></div><script>new Vue({el: "#app",})</script></body>
(2)创建所有"页面"组件文件
a. 项目中,有几个"页面",就要创建几个页面组件文件;
b. 所有页面组件都要集中放在一个名为 views 的文件夹中;
c. 每个页面组件其实都是一个子组件;
d. 在唯一完整的 HTML 页面顶部引入页面组件;
e. 创建 404 页面组件,在唯一完整的 HTML 页面顶部引入,加入到路由字典中最后一项:
{ path:"*", component:NotFound }//其中“*”表示除正确输入之外的所有情况
(3)创建路由器对象
a. 在唯一完整的 HTML 页面顶部引入 vue-router.js(官方);
b. 创建路由器对象。先将路由器对象保存在 router/index.js 文件中;然后先创建路由字典,再创建路由器对象;
//创建路由器字典var routes=[{path:"/相对路径", component:页面组件对象名},...]//创建路由器对象var router=new VueRouter({ routes })
c. 引入到唯一完整的 HTML 页面中;
<script src=“router/index.js”>
d. 将 router 对象加入到 new Vue() 中,这样 router 对象才可以修改页面中的内容;
new Vue({el:"#app",router})
e. 在唯一完整的 HTML 页面中 <div id="app"> 内,添加<router-view></router-view>标签,用于为将来的页面组件占位。
补充:路由器对象的三大功能(高频笔试面试)
监视地址栏变化;
查找当前路径对应的页面组件;
将找到的页面组件替换到<router-view>的位置。
(4)创建除页面以外的其它全局组件或子组件(如页头)
a. 所有不足以成为一个页面的组件片段都要集中创建在 components 文件夹中;
b. 所有的组件,暂时都创建为子组件,且都要在唯一完整的 HTML 页面中引入;
c. 如果是全局组件,只要在 new Vue() 之前,使用 ponent() 将子组件对象转为全局组件即可。
ponent("组件标签名", 组件对象名);
如果所有页面都需要显示页头,则只要在 <router-view> 上方添加 <页头组件> 标签即可;如果有的页面有页头,有的页面不需要页头,就只在那些需要页头的组件中添加 <页头组件>。
一个完整的单页面应用文件结构如下:
3. SPA路由跳转
(1)在 HTML 中写死的跳转连接
<router-link to="/相对路径">文本</router-link>
<router-link to="/xxx"</router-link> 会被翻译为 <a href="xxx"></a>,翻译过程中 vue 会对 a 做一些自动的加工。
(2)在程序中自动跳转
this.$router.push("/相对路径")
(3)路由跳转传参
a. 配置路由字典中的路由字典项;
{ path:"/相对路径/:变量名", component: 页面组件对象名, props:true}//:变量名 表示为上个页面传到下个页面的值起一个变量名,便于重复使用//props:true 让地址栏中的上个页面传来的值,自动掉入下一个页面的props中成为一个外来属性/变量
b. 跳转时携带参数值到下个页面;
<router-link to="/相对路径/参数值">//或者this.$router.push("/相对路径/参数值")//路由传参,在路由字典项的path中定义变量时必须加://但在跳转时传参时既不用加:也不用加变量名,写参数值即可
c. 在下个页面中直接使用 props 中外部传来的变量。
props:[ "变量名" ]
如下:
举例:实现单页面应用(以上述文件结构为基础);
index.html
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/vue.js"></script><script src="js/vue-router.js"></script><script src="views/Detail.js"></script><script src="views/Index.js"></script><script src="views/NotFound.js"></script><script src="router/index.js"></script><script src="components/MyHeader.js"></script></head><style>.router-link-exact-active {background-color: rgb(78, 75, 75);width: 50px;padding: 5px;border-radius: 5px;color: white;text-decoration: none;}</style><body><div id="app"><!--为所有页面添加页头--><!-- <my-header></my-header> --><router-view></router-view></div><script>//将普通子组件MyHeader转为全局组件ponent("my-header", MyHeader);new Vue({el: "#app",router})</script></body></html>
views/Index.js
var Index = {template: `<div><my-header></my-header><h1 style="color:red">这里是首页</h1><button @click="goto(1)">查看1号商品详情</button><button @click="goto(5)">查看5号商品详情</button><button @click="goto(13)">查看13号商品详情</button></div>`,methods: {goto(lid) {// 程序中自动跳转this.$router.push(`/detail/${lid}`)}}}
views/Detail.js
var Detail = {props: ["lid"],template: `<div><my-header></my-header><h1 style="color:blue">这里是详情页</h1><h2>显示{{lid}}商品的详细信息...</h2></div>`}
views/NotFound.js
var NotFound = {template: `<div><h2 style="color:yellow">404:嘿!走到哪儿了!</h2></div>`}
router/index.js
var routes = [{path: "/", //用户运行后直接进入首页component: Index},{path: "/detail/:lid",component: Detail,props: true},{path: "*", //除输入正确之外的所有情况component: NotFound}];var router = new VueRouter({routes});
components/MyHeader.js
var MyHeader = {template: `<div><h1 style="color:orange">这里是页头</h1><ul><li><router-link to="/">首页</router-link></li><li><router-link to="/details">详情页</router-link></li></ul><hr></div>`}
效果如下:
在首页时,首页高亮显示;
点击第一个按钮;
404界面;