前端框架vue.js系列教程(4)-vue.js单页面应用开发

2023-04-13 08:45:35.0

前端框架vue.js系列教程:

什么是单页面应用程序?

单页面应用(SPA,Single Page Application),就是只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。

简单来说就是:整个Web程序只有单个HTML文件,所有操作都在这张页面上完成,由 js 来按需加载子页面内容到这张页面中,不会发生网页间的跳转。

单页面应用程序的业务逻辑全部都在本地操作,数据都需要通过 ajax 同步提交。在URL链接中采用 # 号来作为当前视图的地址(例如,http://www.xueai8.com/#),通过改变 # 号后的地址参数来载入不同的页面片段。

vue.js通过路由实现单页面程序

前端路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。

在 Web 前端单页应用 SPA(Single Page Application)中,路由描述的是 URL 与 UI 之间的映射关系,这种映射是单向的,即 URL 变化引起 UI 更新(无需刷新页面)。

Vue 路由允许我们通过不同的 URL 访问不同的内容。通过Vue.js + vue-router(Vue的路由模块)可以很简单的实现多视图的单页Web 应用。

如果还没有安装vue-router,那么首先需要使用npm包管理器安装它,命令如下:

# 首先进入到项目根目录
$ cd E:\vueprojects\hellovue-app

# 然后执行下面的安装命令
$ npm install vue-router

执行完毕,可以在项目根目录,继续执行下面的命令查看,可以看到安装的vue-router依赖包:

$ npm list

实现一个简单的vue.js单页面程序

接下来,我们继续在上一节的hellovue-app项目中实现一个简单的vue.js单页面Web应用程序。

在VS Code中打开项目文件夹,然后按以下步骤操作。

(1) 在项目的src目录下,创建一个子目录views:

(2) 在项目的src/views/目录下,分别创建三个.vue文件,分别进行编辑:

PageOne.vue:

<template>
   <div class="page">
      <h1>我是Page One!</h1>  
   </div>
</template>

<script>
export default {
    name: 'PageOne',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: brown; 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

PageTwo.vue:

<template>
   <div class="page">
       <h1>我是Page Two!</h1>  
   </div>
</template>

<script>
export default {
     name: 'PageTwo',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: rgb(77, 78, 129); 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

PageThree.vue:

<template>
    <div class="page">
       <h1>我是Page Three!</h1>  
    </div>
</template>

<script>
export default {
    name: 'PageThree',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: rgb(11, 82, 26); 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

(3) 修改App.vue如下:

<template>  
   <div class="navigate">
      <ul>
           <li><router-link to="/">首页</router-link></li>
           <li><router-link to="/page/one">to page one</router-link></li>
           <li><router-link to="/page/two">to page two</router-link><</li>
           <li><router-link to="/page/three">to page three</router-link></li> 
      </ul>
   </div>
   <div class="pages">
         <img alt="Vue logo" src="./assets/logo.png">
         <router-view></router-view>
   </div> 
</template>

<script>
    export default {
         name: 'App',
    }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.navigate{
  width:200px;
  float:left;
  background-color: aliceblue;
}
.pages{
  margin-left: 210px;
}
</style>
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。 注意,在上面的代码中,我们使用了两个路由相关的标签组件:
  • <router-link>:该组件用于设置一个导航链接,通过传递 to属性来指定目标地址链接,即要显示的内容。router-link被解析后将呈现一个带有正确href属性的<a>标签。
  • <router-view>:是路由出口,将显示与 url 对应的组件。也就是说,与roter-link标签中to属性值匹配到的组件将渲染在这里。
请注意,这里没有使用常规的 a 标签,而是使用一个vue的组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。

(4) 修改入口程序main.js,如下:

import { createApp } from 'vue'
import App from './App.vue'

// 导入 vue router
import { createRouter, createWebHashHistory } from 'vue-router'

// 1. 定义路由组件(组件名称与组件路径映射)  
import PageOne from "./views/PageOne.vue"
import PageTwo from "./views/PageTwo.vue"
import PageThree from "./views/PageThree.vue"

// 2. 定义一些路由映射(路由路径与组件名称映射)
const routes = [
    { path: '/', component: PageOne },
    { path: '/page/one', component: PageOne },
    { path: '/page/two', component: PageTwo },
    { path: '/page/three', component: PageThree },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 4. 内部提供了 history 模式的实现
    history: createWebHashHistory(),
    routes: routes,     // 指定使用的路由
})

// 5. 创建并挂载根实例
// createApp(App).mount('#app')     // 不用这个   
const app = createApp(App)

// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

 // 把App挂载到#app节点上
app.mount('#app')

(5) 至此,我们的代码实现已经完成,接下来启动服务器。在VS Code编辑器下方的“终端”窗口中,执行如下命令:

$ npm run serve

然后打开浏览器,访问http://localhost:8080,可以看到如下的界面,这是默认首页,我们配置它和/page/one链接都指向PageOne.vue组件。

单击"to page two"链接,页面显示如下:

单击"to page three"链接,页面显示如下:

可以发现,在单击不同的导航链接切换时,并没有发生页面的跳转,一切都在是单个页面中进行的-这就是单页面应用!


《Flink原理深入与编程实战》