后台管理系统vue.js路由

1.生命周期

1.初始期:一个组件实例，只执行一次。
    constructor: 构造函数 ，初始化数据
    componentWillMount: 在渲染之前，二次更新数据
    render :渲染  加载虚拟DOM，渲染节点到页面
    componentDidMount:渲染完成 发ajax,开轮播，开计时器，window|document绑定事件，ref

2.更新期:state和props发生修改，都会引起更新期的执行
    componentWillReceiveProps ：接收的props变了，才会执行  
    shouldComponentUpdate：
        //1.没有写shouldComponentUpdate,更新 componentWillUpdate->render->componentDidUpdate
        // 2.写了，没有return,就会报错
        // 3.return true ,更新期：shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
        // 4.return false 更新期：shouldComponentUpdate
    componentWillUpdate：更新之前
        //更新之前，可以通过this.state,this,props取到更新之前的旧值，nextState,nextProps是更新之后的新值。
    render：渲染 根据新的state或者props,生成一课虚拟DOM树，进行diff算法，计算出最优的更新方式，进行渲染
    componentDidUpdate:更新完成
3.销毁期
    componentWillUnmount:销毁之前 清除计时器,清除window|document上的事件

2.路由

1.安装依赖包

npm i react-router-dom -save

2. 路由模式 HashRouter BrowserRouter

index.js 入口文件定义路由模式

//配置路由模式 HashRouter：hash模式 BrowserRouter：history模式
import {HashRouter,BrowserRouter} from "react-router-dom"

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>
  ,
  document.getElementById('root')
);

3.路由出口 Switch

import {Switch} from "react-router-dom"

export default function App() {
  return (
    <div>
      {/* 一级路由出口 */}
      <Switch>
       
      </Switch>
    </div>
  )
}

4.路由规则 Route

import {Switch,Route} from "react-router-dom"

 	<Switch>
        <Route path="/login" component={Login}></Route>
        <Route path="/register" component={Register}></Route>
        <Route path="/index" component={Index}></Route>
        <Route path="/detail" component={Detail}></Route>
        <Route path="/list" component={List}></Route>
        <Redirect to="/login"></Redirect>
      </Switch>

5.重定向 Redirect

import {Redirect} from "react-router-dom"

	<Switch>
        <Route path="/login" component={Login}></Route>
       
        <Route path="/list" component={List}></Route>
        <Redirect to="/login"></Redirect>
      </Switch>

6.导航 Link NavLink

import { Link, NavLink } from "react-router-dom"

<Link to="/index/shop">购物车</Link>
<NavLink to="/index/shop">购物车</NavLink>

注意：NavLink有activeClassName，Link没有

7.编程式导航

this.props.history.push() //添加新的历史记录
this.props.history.replace()//是用新的记录替换当前历史记录
this.props.history.go(-1);//返回

路由组件可以直接使用编程式导航，非路由组件需要通过设置withRouter()

import { withRouter } from "react-router-dom"
class Nav {
    
}
export default withRouter(Nav)

8.嵌套路由

 {/* 二级路由出口 */}
<Switch>
    <Route path="/index/home" component={Home}></Route>
    <Route path="/index/cate" component={Cate}></Route>
    <Route path="/index/shop" component={Shop}></Route>
    <Route path="/index/mine" component={Mine}></Route>
    <Redirect to="/index/home"></Redirect>
</Switch>

9.路由传参 list->detail

1.search（？） 传参

<Link to={"/detail?id=1}" className="list-item" key={item.id}>
        <h3>{item.name}</h3>
        <div className="btn">立即抢购</div>
</Link>

取值

componentDidMount(){
        let str=this.props.location.search;
    		//'?id=1&a=10&b=20&c=30'-->{id:"1",a:"10",b:"20",c:"30"}
        let result=querystring.parse(str.slice(1))
        console.log(result);
        //ajax

  }

3.stylus

1.安装stylus 依赖包

npm i stylus stylus-loader --save

2.package.json react-scripts版本号更改

“react-scripts:"3.2.0"

3.git 提交本地仓库

git add . 
git commit -m "123"

4.导出配置文件

npm run eject

5.配置stylus

reac使用stylus,先运行npm run eject,在wenpack.config.js文件，module.export->module->oneOf添加一下代码

        {   
            test: /\.styl$/,    
            use: [       
                  require.resolve('style-loader'),        
                  require.resolve('css-loader'),        
                  require.resolve('stylus-loader')    
         		] 
        },              

6.src/stylus

index.styl 整合css
color.styl color
size.styl 大小
form.styl form