minitUI vue绑定 正则验证

HTML5新特新 Unit01

详情页的实现

需求是点击首页中某一个文章列表项后，跳转到详情页，在详情页中显示文章详细信息。这个过程需要在跳转的过程中传递当前选中文章的文章id，然后在详情页中接收id参数，发送http请求，获取详情数据，渲染页面。

两页面间跳转过程中（route-link）的传参方案

第一种方案：使用？的方式向第二个页面传参：

<router-link to="/article?id=3&name=zs">
    点我跳转
</router-link>

详情页如何接收？

mounted(){
   
    this.$route.query.id  =>   '3'
    this.$route.query.name =>  'zs'
}

第二种方案：使用路径参数的方式向第二个页面传参：

<router-link to="/article/3">
	点我跳转
</router-link>

如何接收：

{
   
    path: '/article/:id'
    name: 'xx',
    compopnent: xxx
}

mounted(){
   
    this.$route.params.id
}

文章详情页的实现

1. 准备好文章详情页。Article.vue

2. 为首页中的每个列表项，添加routerlink，写好目标路由地址。

3. 在详情页mounted中获取id，发送请求，加载详细数据，渲染页面。

momentjs

momentjs是一个日期时间的js类库。它可以运行在普通浏览器环境与node环境下。提供了很多常用的日期相关操作。

创建moment对象

let m = moment();   //  m代表当前时刻表示的时刻对象
let m = moment('2011-01-04')  // 通过默认格式创建moment
let m = moment('04/01/2011', 'DD/MM/YYYY') //通过自定义格式创建
let m = moment.unix(1310002311)  //通过时间戳（秒）创建moment对象

输出moment对象

m.format('YYYY-MM-DD HH:mm:ss') => '2021-06-04 10:36:35'
m.format('YYYY/MM/DD')  => '2021/06/04'
m.format