用户登录

在 Vue 应用里创建一个路由器,然后定义一些路由,访问路由地址的时候就会打开跟这个地址对应的组件。先给应用安装一个包,打开 package.json,在 dependencies 里面,添加一个新的依赖,名字叫 vue-router,设置一下这个包的版本。^4.0.0-0。

保存一下文件,回到终端,在项目所在目录的下面,可以执行一下 yarn 或者 npm install ,准备好项目的依赖。 装好以后先去创建一个路由器。

可以放在 src/app 目录的下面,名字是 app.router.ts,在这个文件里创建一个路由器,声明一个东西叫 router ,它的值可以用一下 createRouter 创建一个路由器,这个东西来自刚才我们安装好的 vue-router。

给它一个对象参数,在里面先设置一下 history ,它的值可以执行一下 createWebHistory ,这个东西也来自 vue-router。

在路由器里定义的路由可以交给 routes 这个属性,暂时先用一个空白的数组。 在这个文件里可以默认导出创建的这个路由器,export default router。

下面要配置一下 vue 应用,让它使用这个路由器,打开应用的入口,main.ts ,先在文件的顶部导入刚才创建的这个路由器,名字是 appRouter 来自 当前目录 app 下面的 app.router。

在创建了 vue 应用的下面,可以用一下这个应用上的 use 方法,把 appRouter 交给这个方法就行了。这样在应用里就可以使用路由功能了。

定义 Routes

在路由器里要定义一些路由,这些路由可以交给 routes 这个属性。在 src/app 的下面,新建一个 app.routes.ts ,在这里可以定义应用整体相关的路由。

声明一个东西叫 routes,设置一下它的类型,应该是一个 Array,数组项目的类型是 RouteRecordRaw ,一个数组,里面是一些路由项目,每个项目都是一个对象,对象里可以使用 name 设置一下这个路由的名字,比如添加一个叫 home 的路由。再用 path 设置一下这条路由的地址,比如 / ,表示应用的根,再用 component 设置一下路由对应的组件,比如设置成 AppHome。

下面再去定义一下这个组件,放在 src/app/components 目录的下面,名字是 app-home.vue ,在组件文件里添加一组 template,里面是一组 div ,随便在里面再添加一行文字。

然后回到 app.routes ,在文件顶部导入刚才定义的 AppHome 组件,来自当前目录 components 下面的 app-home.vue 。

最后再默认导出创建的这个 routes 。

打开应用的路由器,在文件顶部导入 appRoutes ,来自当前目录下的 app.routes, 然后在这个 routes 数组里面,可以把 appRoutes 里的东西放进来,这里用一个展开操作符。

资源模块

在应用资源目录的下面,可以单独创建一个路由模块,在里面定义跟这个资源相关的路由,比如在这个 post 目录的下面,新建一个 post.routes.ts。

打开 app.routes ,复制一下里面的东西,把它粘贴到这个 post.routes 里面。 然后再修改一下,在这个路由模块里,定义一条路由,名字是 postIndex, 路由的 path 设置成 /posts ,路由对应的组件设置成 PostIndex。

在上面可以导入这个组件,名字是 PostIndex,来自当前目录 index 的下面,名字叫 post-index.vue。 下面可以再去创建一下这个组件。

放在 src/post/index 的下面,名字是 post-index.vue。 一组 template,里面是这个组件的模板,一组 div,随便再包装一行文字,比如 PostIndex。

再回到 post.routes 模块,保存一下, 然后再打开应用的路由器模块, 在文件顶部导入 postRoutes,来自 @/post/post.routes。 这里你也可以使用一个相对的地址,应该就是 ../post/post.routes

然后在这个 routes 里面,把 postRoutes 里的东西放进来,用一个展开操作符。

router-view

打开 app 组件,在这个应用的根组件里面,可以添加一个 router-view 组件,访问路由地址的时候,路由对应的组件会在这里显示。

如果在应用里想要链接到应用的路由地址,可以使用 router-link 这个组件,用一下这个组件,包装一下这个 name 数据。然后在这个 router-link 的上面,可以使用 to 这个属性设置一下路由的地址,比如 / 表示应用的根。

预览

最后再到浏览器上预览一下,现在访问的是应用的根,所以页面上会显示 AppHome 组件里的内容。再访问一下 /posts, 这个路由地址对应的是 PostIndex 组件,所以会在页面上出现 PostIndex 组件里的内容。

应用的路由:Vue Router《 Vue.js 前端应用 #12:应用架构 》

统计

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

社会化网络

关于

微信订阅号

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