Redirect буюу өөр хуудаст шилжүүлэх

Сайтын чиглүүлэгчид байхгүй эсхүл хуудас олдоогүй гэх мэтийн тохиолдолд хэрэглэгчдийг тохирох хуудаст шилжүүлэх хэрэгтэй болдог. Үүнийг redirect буюу шилжүүлэлт гэдэг. Vuejs -ийн шилжүүлэлтийн механизм хэрхэн ажилладагийг энэ хичээлээр авч үзье. Үүний тулд програмийн чиглүүлэгчдийн тодорхойлолтод

...
export default new VueRouter({
  routes: [
    {
      path: '',  
      component: Home
    },
    ...
    {
      path: '/none',
      redirect: '/cars'
    }
  ],
  ...
})

none гэсэн чиглүүлэгчийг үүсгээд түүнд хандвал cars хуудаст шилжүүлнэ гэдгийг redirect: '/cars' гэж заан өгье.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
Өөрчлөлтийн амьдралын цикл

  Нээгдсэн тоо: 369 Бүртгүүлэх

Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

Функц ба хувьсагч

  Нээгдсэн тоо: 2640 Төлбөртэй

Функцын тухай ойлголт

Функц – гэдэг нь программын дурын хэсгээс дуудан ажлуулах боломжтой Javascript кодын хэсэг. Функцыг ашиглахын тулд түүнийг эхлээд тодорхойлох хэрэгтэй. Функц давтагдахгүй нэртэй байх ёстой. Нэр өгөх дүрэм нь хувьсагчийн нэрийг өгөх дүрэмтэй ижилхэн. Функцыг тодорхойлох бичлэг нь ерөнхийдээ доорх хэлбэртэй байна.

function <функцын нэр> ([<параметрүүдийн жагсаалт>])
{
     JavaScript оператор;
     JavaScript оператор;
     . . .
     JavaScript оператор;

     [return <Буцаах утга>]
}

VueJS гэж юу болох

  Нээгдсэн тоо: 2441 Нийтийн

Сүүлийн жилүүдэд сайт боловсруулах ажиллагаанд раектив буюу дэвшилтэд Angular, React гэх мэтийн javascript сангууд маш хүчтэй түрэн орж ирэх болсон. Үүний нэг бол Vue фреймворк бөгөөд сайтад энэхүү дэвшилтэд технологи ямар боломжтой, бусдаас ямар давуу талуудтай, ямар зориулалттай болохыг цуврал хичээлүүдээр толилуулна. Эхлээд Javscript фреймворкууд яагаад ийм хүчтэй түрэн орж байгаа талаар ярилцая.

useRef

  Нээгдсэн тоо: 263 Төлбөртэй

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 58

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 90

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 86

 
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 203

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 245

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 254

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 297

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 285

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 369

 
Энэ долоо хоногт
Бодлого 13.038

функцийн интервал дахь хамгийн бага утгыг ол.

Нээгдсэн тоо : 855

 
Бодлого 10.049

Зөв дөрвөн өнцөгт пирамидын өндөр 4. Хажуу ирмэг суурийн хавтгайд 30 градусын өнцгөөр налсан бол пирамидын хажуу ирмэгийг ол.

Нээгдсэн тоо : 1848

 
Бодлого 4.062

бол M·N=?

Нээгдсэн тоо : 1161

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195