VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建。
项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送
后续VueRouter系列的文章的示例编写均基于该项目环境。
VueRouter系列文章链接
《VueRouter爬坑第三篇》-嵌套路由
阅读目录
一.前言
二.动态路由配置
1.配置动态路由
2.配置动态路由映射到的组件
3.编写可跳转的URL
4.界面效果
5.多段路径参数
一.前言
在《VueRouter爬坑第一篇-简单实践》中,我们探究了如何从一个url路由到某个组件,我们将上一篇的路由配置代码在看一下// vue-router使用第一步:引入vue-router import Vue from "vue" import Router from "vue-router" // vue-router使用第二步:组件注册到全局 Vue.use(Router) // 第三步:定义路由配置 // 引入路由需要映射的组件 import Index from '@/components/Index.vue' const routes = [ { path: '/index', // 匹配的URL component: Index //映射的目标组件 } ] // 第四步:创建vue-router实例,传递前面定义的路由配置 const router = new Router({ routes: routes }) // 第五步:将vue-router实例使用export导出(供其他模块使用) export default router
可以看到routes中配置的那一条路由path选项为'/index',那么能匹配到的url就只能是'/index',而在实际开发中的url可能会是多种多样的。
假如我们存在一个需求:多种路由需要同时匹配到同一个组件,那么这个时候就需要动态路由来解决这个问题。
二.动态路由配置
1.配置动态路由
动态路由的配置相对也比较简单,我们现在在router.js中添加一条动态路由的配置(为了看得清楚,我们将上一篇中写在router.js文件中的注释删掉)。 E:\MyStudy\test\VueDemo\src\router\router.jsimport Vue from "vue" import Router from "vue-router" Vue.use(Router) // 引入路由需要映射的组件 import Index from '@/components/Index.vue' const routes = [ { path: '/index', // 具体的路由 component: Index //映射的目标组件 }, //新增一条动态路由 { path: '/pageContent/:id', // 动态路由 } ] const router = new Router({ routes: routes }) export default router
我们可以看到我们新增了一条路由配置,path设置为:'/pageContent/:id',其中冒号就表示路由中可变的部分,冒号后的id表示参数的内容。想这样的路由就可以匹配到像'pageContent/212310、'pageContent/212311'这样的url。
2.配置动态路由映射到的组件
现在我们需要给这条动态路由配置它映射的目标组件,在这之前我们需要新建一个组件:PageContent。 E:\MyStudy\test\VueDemo\src\components\PageContent.vue<template> <div> <h1>这里是PageContent组件</h1> <h3>$routes.params = {{$route.params}}</h3> <h3>$routes.params.id = {{$route.params.id}}</h3> </div> </template> <script> export default { name: 'PageContent' } </script>
备注:这里我们可能看到了$route.params这个写法,这块在官方文档中有介绍:动态路由设置的参数会被设置到$routes.params中。
我们为了在PageContent中区分模板是从不同的路由渲染出来的,所以使用了$routes.params获取到了动态路由的参数并展示在模板中上。
接来下给动态路由配置它映射的目标组件PageContent
E:\MyStudy\test\VueDemo\src\router\router.js
import Vue from "vue" import Router from "vue-router" Vue.use(Router) // 引入路由需要映射的组件 import Index from '@/components/Index.vue' import PageContent from '@/components/PageContent.vue' const routes = [ { path: '/index', // 具体的路由 component: Index //映射的目标组件 }, //新增一条动态路由 { path: '/pageContent/:id', // 动态路由 component: PageContent //动态路由映射的目标组件 } ] const router = new Router({ routes: routes }) export default router
3.编写可跳转的URL
我们依旧还是在HelloWorld.vue组件中编写url,并且需要使用<router-view>告知URL的渲染位置 E:\MyStudy\test\VueDemo\src\components\PageContent.vue<template> <div class="hello"> <p>这里是HelloWorld组件</p> <!-- 可跳转的URL --> <router-link to="/index">点击这里渲染Index组件</router-link> <router-link to="/pageContent/212310">点击这里渲染pageContent组件</router-link> <router-link to="/pageContent/212311">点击这里也可以渲染pageContent组件</router-link> <!-- 使用下面的这个标签可以告诉vue-router将匹配到的组件渲染到这个位置 --> <router-view></router-view> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
4.界面效果
可以看到当url为:/pageContent/212310 时,成功的匹配渲染了PageContent组件,同时从$routes.params中获取动态路由中设置的id参数值:212310;
当url为:/pageContent/212311 时,也成功的匹配渲染了PageContent组件,同时从$routes.params中获取动态路由中设置的id参数值:212311
5.多路径参数
前面的实例中我们只设置了id一个参数,vue-router还支持多段的路径参数,这里也比较简单,我们就不写实例实践了,具体的配置方法如下(来自官网截图):
完结!!!!!!!
- 第二篇:集成开发平台Eclipe篇
- 第二篇 一次事务过程
- Eclipse下的J2EE开发[第二篇.MyEclipse应用程序开发系列二]
- 学习动态性能表第二篇-(2)-v$sesstat
- 走近Silverlight - 微软Silverlight上海开发团队Blog第二篇
- 动态路由(rip)的配置
- neodatis.odb 第二篇 一切都是比特
- cisco路由器基本实验之三 动态路由之RIP协议的配置(Boson NetSim)
- 动态路由(二) [EIGRP和OSPF大比拼]
- yaffs基础第二篇——yaffs中缓冲机制
- beta 的第二篇心得:在 case 语句中使用字符串
- 【嵌入式Linux学习七步曲之第二篇 交叉开发环境】FC6 上架设TFTP服务器,Transfer timed out
- C++ 初学者指南 第二篇(6)
- Beej的网络编程入门教程 第二篇 平台与编译器
- HTTP - post & get 第二篇
- 第二篇:CISCO2950 交换机上vlan配置
- 坚持写第二篇实训笔记
- 第二篇 java应注意的问题
- Hibernate 学习笔记第二篇
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第二篇:第一个页面