day0608

day0608

flex box布局

阮一峰flex布局教程

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器，项目

主轴，交叉轴

容器6个属性

flex-wrap
有固定宽度才能换行

金刚区：

中文没有基线的概念

项目6个属性

flex-grow 分配剩余空间，放大

flex-shrink ，相反

布局方案就3种

1.100%流式布局
图片
2.rem布局
vw，vh
3.响应式布局

路由

起步（见昨日）

vue的路由是个插件

vue：
router-link：
tag:“div” 把当前标签变为div

已经废弃

动态路由匹配

/:id

一个组件匹配多个路径

const User = {
   
  template: '<div>User</div>'
}

const router = new VueRouter({
   
  routes: [
    // 动态路径参数 以冒号开头
    {
    path: '/user/:id', component: User }
  ]
})

const User = {
   
  template: '<div>User {
   { $route.params.id }}</div>'
}

响应路参数的变化

const User = {
   
  template: '...',
  watch: {
   
    $route(to, from) {
   
      // 对路由变化作出响应...
    }
  }
}

const User = {
   
  template: '...',
  beforeRouteUpdate(to, from, next) {
   
    // react to route changes...
    // don't forget to call next()
  }
}

可以传参

相当于动态组件？？

方案：
1.用watch实现监听

2.beforeRouteUpdate钩子，路由守卫

捕获所有路由或 404 Not found 路由

{
   
  // 会匹配所有路径
  path: '*'
}
{
   
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

高级匹配模式

匹配优先级

常与多视图一起用
一个路径匹配多个组件

嵌套路由

子路由

const router = new VueRouter({
   
  routes: [
    {
   
      path: '/user/:id',
      component: User,
      children: [
        {
   
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
   
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

const router = new VueRouter({
   
  routes: [
    {
   
      path: '/user/:id',
      component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        {
    path: '', component: UserHome }

        // ...其他子路由
      ]
    }
  ]
})

编程式的导航

push,go,

router.push(location, onComplete?, onAbort?)

// 字符串
router.push('home')

// 对象
router.push({
    path: 'home' })

// 命名的路由
router.push({
    name: 'user', params: {
    userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({
    path: 'register', query: {
    plan: 'private' }})

const userId = '123'
router.push({
    name: 'user', params: {
    userId }}) // -> /user/123
router.push({
    path: `/user/${
     userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({
    path: '/user', params: {
    userId }}) // -> /user

router.replace(location, onComplete?, onAbort?)

router.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)