创建 Vue 应用的路由器

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

路由可以让用户在访问某个特定地址的时候,显示应用里的某个特定的组件。在 Vue 应用里使用路由功能,需要安装一个包,先打开项目根目录下的 package.json ,在 dependencies 里面,可以添加一个新的依赖,名字叫 vue-router,设置一下这个包的版本,向上的小箭头,4.0.0-0 。

保存一下这个文件,回到终端,可以执行一下 yarn ,或者 npm install ,安装一下项目依赖的东西。安装完成以后,我们就可以使用 vue-router 这个包提供的功能了。

在 src/app 的下面,新建一个文件,名字叫 app.router.ts,在这个文件里可以定义并且导出一个路由器。先创建一下路由器,起个名字叫 router,它的值用一下 createRouter 这个方法,这个方法来自 vue-router,这里编辑器帮我们自动导入了这个方法。

给这个方法提供一个对象参数,需要一个 history 属性,它的值用一下 createWebHistory 这个函数生成,你可以给这个函数一个基本地址参数,暂时我们先不设置这个参数。

下面还需要一个 routes ,这个 routes 属性里的东西就是定义的一些路由。 最后可以导出创建的这个 router,让它作为这个模块的默认的导出。

然后在上面,需要再去创建 routes 属性的值,也就是要定义的一些路由。名字叫 routes,然后设置一下它的类型,它是一个 Array,也就是数组,数组里的项目的类型是 RouteRecordRaw,这个东西也来自 vue-router 。

先让 routes 的值等于一个空白的数组。后面我们会在里面定义一些路由。

创建了这个路由器以后,需要在 Vue 应用里用一下,打开应用的入口,main.ts ,在文件的顶部 ,导入 appRouter ,来自当前目录 app 下面的 app-router。

然后在创建了应用的下面,可以设置在应用里使用这个路由器。用的是 app 上面提供的 use 这个方法,把 appRouter 交给这个方法。

这样我们就配置好了 Vue 应用里的路由器。

创建 Vue 应用的路由器《 Vue.js 前端应用 #5:应用路由 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点