VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建。
项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送
后续VueRouter系列的文章的示例编写均基于该项目环境。
VueRouter系列文章链接
本篇文章完整代码
https://github.com/JEmbrace/VueRouter/tree/DynamicRoute
阅读目录
一.前言
二.动态路由配置
1.配置动态路由
2.配置动态路由映射到的组件
3.编写可跳转的URL
4.界面效果
5.多段路径参数
一.前言
// 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.配置动态路由
import 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.配置动态路由映射到的组件
<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
<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还支持多段的路径参数,这里也比较简单,我们就不写实例实践了,具体的配置方法如下(来自官网截图):
VueRouter爬坑第二篇-动态路由的更多相关文章
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 《VueRouter爬坑第三篇》-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- VueRouter爬坑第三篇-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 使用wepy开发微信小程序商城第二篇:路由配置和页面结构
使用wepy开发微信小程序商城 第二篇:路由配置和页面结构 前言: 最近公司在做一个微信小程序的项目,用的是类似于vue的wepy框架.我也借此机会学习和实践一下. 小程序官方文档:https://d ...
- Vue-Router学习第二弹动态路由\懒加载\嵌套路由
在我们做项目时肯定会有出现动态路由: 举个栗子: 一个品种的商品页面会有同类不同样的商品就要在路由的后面加一个id: Vue的路由id是这样添加的: 两种动态路由 一种是params参数添加: 首先现 ...
- web前端入坑第二篇:web前端到底怎么学?干货资料! 【转】
http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...
- vue-router爬坑记
简介 因为我们用Vue开发的页面是单页面应用,就相当于只有一个主的index.html,这时候我们就不能使用a标签来进行页面的切换了,所以这时候我们今天的主角Vue-Router就闪亮的登场了 Vue ...
- 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)
先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...
随机推荐
- 05 python学习笔记-常用内置函数(五)
1.sorted() 函数对所有可迭代的对象进行排序(默认升序)操作 sort 与 sorted 区别: sort 是应用在 list 上的方法,sorted 可以对所有可迭代的对象进行排序操作. l ...
- Element filtername is not allowed here-web.xml version="3.0"-intellij idea
Element filtername is not allowed here-web.xml version="3.0"-intellij idea Intellij IDEA 报 ...
- django-数据库之连接数据库
1.连接数据库出现的一些问题 基本目录如下: 首先我们pip install pymysql 然后在项目中,进行配置settings.py: 然后在__init__.py中进行输入: 启动服务器: 报 ...
- json基本内容
json的基本信息和历史 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于欧洲计算机协会制定的js规范的一个子集,采用完全独立于编程语言的文本格式来 ...
- ICollection IEnumerable/IEnumerator IDictionaryEnumerator yield
Enumerable和IEnumerator接口是.NET中非常重要的接口,二者区别: 1. IEnumerable是个声明式的接口,声明实现该接口的类就是“可迭代的enumerable”,但并没用说 ...
- Django表单集合----Formset
概述:Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息,下面将会详细讲述如何使 ...
- leetcode算法小题(3)
问题描述: 判断一个数是否为回文数 class Solution { public boolean isPalindrome(int x) { if(x<0) ...
- SpringBoot2.1.9+dubbo2.7.3+Nacos1.1.4构建你的微服务体系
简单几步使用最新版本的DUBBO构建你的微服务体系 NACOS注册中心 从github下载最新版本的nacos 上传至服务器并解压 单机启动sh startup.sh -m standalone na ...
- 爬取bing背景图片
因为工作环境的原因,没办法用梯子,也不喜欢用某度,只能用bing,发现背景图片蛮好看的,刚好最近在学习摄影,需要提高审美,就想着把bing背景图片都爬去下来做桌面背景.写的代码比较入门,只是做个记录, ...
- [考试反思]0812NOIP模拟测试18:稀释
[]200 [4]190[5]180 [6]170[7]150 [11]140[16]130[19]120[24]100 有些事情,看淡了,也就简单了. 连续爆炸之后,没什么感觉了. 把态度放正,把结 ...