安卓开发-使用Vue Router开发单页面应用

使用Vue Router开发单页面应用
在传统的多页面应用中，不同的页面之间的跳转都需要向服务器
发起请求，服务器处理请求后向浏览器推送页面。但是在单页面应用
中，整个项目中只会存在一个HTML文件，当用户切换页面时，只是通
过对这个唯一的HTML文件进行动态重写，从而达到响应用户的请求。
由于访问的页面是并不真实存在的，页面间的跳转都是在浏览器端完
成的，这就需要用到前端路由。本章将重点学习官方的路由管理器Vue
Router。
1 使用Vue Router
下面来看一下如何在HTML页面和项目中使用Vue Router。
1.1 HTML页面使用路由
在HTML页面中使用路由，有以下几个步骤。
（1）首先需要将Vue Router添加到HTML页面，这里采用可以直接
引用CDN的方式添加前端路由。
<script src="https://unpkg.com/vue-router@next"></script>
（2）使用router-link标签来设置导航链接：
<!--默认渲染成a标签-->
<router-link to="/home">首页</router-link>
<router-link to="/list">列表</router-link>
<router-link to="/details">详情</router-link>
当然，默认生成的是a标签，如果想要将路由信息生成别的HTML标
签，可以使用v-slot API完全定制<router-link>。例如生成的标签类
型为按钮。
<!--渲染成 button 标签-->
<router-link to="/list" custom v-slot="{navigate}">
<button @click="navigate" @keypress.enter="navigate">列表</button>
</router-link>
（3）指定组件在何处渲染，通过<router-view>指定：
<router-view></router-view>
当单击router-link标签时，会在<router-view>所在的位置渲染
组件的模板内容。
（4）定义路由组件，这里定义的是一些简单的组件：
const home={template:'<div>home 组件的内容</div>'};
const list={template:'<div>list组件的内容</div>'};
const details={template:'<div>details 组件的内容</div>'};
（5）定义路由，在路由中将前面定义的链接和定义的组件一一对
应。
const routes=[
{path:'/home',component:home},
{path:'/list'component:list},
{path:'/details',component:details},
];
（6）创建Vue Router实例，将上一步定义的路由配置作为选项传
递进来。
const router=VueRouter.createRouter({
//提供要实现的history实现。为了方便起见，这里使用hash history
history:VueRouter.createWebHashHistory(),
routes//简写，相当于routes:routes
});
（7）在应用实例中调用use()方法，传入上一步创建的router对
象，从而让整个应用程序使用路由。
const vm= Vue.createApp({});
//使用路由器实例，从而让整个应用都有路由功能
vm.use(router);
vm.mount('#app');
到这里，路由的配置就完成了。下面演示一下在HTML页面中使用
路由。
在HTML页面中