react 编程式导航和声明式导航

    <hr /> 

    <ul>

      <li>

      {/*渲染路由组件Login到该位置，同时接收到路由参数ID*/}

          <Route path='/login/:id' component={Login}></Route>

          {/*重定向*/}

          <Redirect to='/'></Redirect>

      </li>

      <li>

      {/*使用路由懒加载的模块，路由组件未加载出来前会以Loading字符显示在页面中*/}

        <Suspense fallback={<h1 style={{color:'skyblue'}}>Loading...</h1>}>

          <Route path="/lazyComponent" component={lazyComponent}></Route>

        </Suspense>

      </li> 

    </ul>

    <br />

  </div>

)

}

}

**NavLink 方式**  

NavLink方式相当于Link的加强版，主要的属性有



activeClassName(string)：设置选中样式，默认值为active  

activeStyle(object)：当元素被选中时，为此元素添加样式  

exact(bool)：为true时，只有当导致和完全匹配class和style才会应用  

strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线  

isActive(func)判断链接是否激活的额外逻辑的功能



需要查看【Link、NavLink】的主要区别在这里附上 CSDN 博文一篇 [https://blog.csdn.net/lhjuejiang/article/details/80366839]( )  

如下代码，在被点击时可以显示路径对应的背景色，路径相同时则显示相同的背景色

import { NavLink} from ‘react-router-dom’

import React from ‘react’

import ‘./index.scss’

export default function Aside(){

return(

<React.Fragment>

 <ul className='links'>

   <li>

     <NavLink activeClassName="selected" to='/aside'>二级菜单</NavLink>

   </li>

   <li>

     <NavLink activeClassName="selected" to='/asid'>二级菜单</NavLink>

   </li>

   <li>

     <NavLink activeClassName="selected" to='/asi'>二级菜单</NavLink>

   </li>

   <li>

     <NavLink activeClassName="selected" to='/as'>二级菜单</NavLink>

   </li>

 </ul>

</React.Fragment>

)

}

**scss中的代码：**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/1a37e7d7f2b34adc9531c4490b4ee8a8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6IiG55-l5LqO6KGM5Li2,size_17,color_FFFFFF,t_70,g_se,x_16)



[]( )2、编程式导航 【props, useHistory() , Route】

--------------------------------------------------------------------------------------------------------



[]( )2.1 **利用已注册路由组件的props**

------------------------------------------------------------------------------------------



这个属性的唯一缺点就是使用时需要在已注册的路由组件中使用，如果该组件不是路由组件，则props对象中将不会有需要使用的路由参数（如果父组件没有给子组件传参，props会是一个空对象）。  

请看下列代码，Aside和AsideTwo、AsideThree都已被注册成路由组件

import { Route, Redirect, Switch, BrowserRouter } from ‘react-router-dom’;

import { Component } from ‘react’;

import Aside from ‘./views/Aside’;

import AsideTwo from ‘./views/Aside/AsideTwo’;

import AsideThree from ‘./views/Aside/AsideThree’;

export default class App extends Component {

render(){

return (

  <div className="App">

    <BrowserRouter>

      <aside className='content'>

        <Switch>

        	{/*注册路由组件*/}

          <Route path="/aside" component={Aside}></Route>

          <Route path="/aside2" component={AsideTwo}></Route>

          <Route path="/aside3" component={AsideThree}></Route>

          {/*重定向*/}

          <Redirect to='/aside'></Redirect>

        </Switch>

    </BrowserRouter>

  </div>

)

}

}

**函数式组件实现路由跳转**  

函数组件中可以通过传参来直接使用props

import ‘./index.sass’

export default function AsideTwo(props){

const changeLink = ()=>{

// console.log('@@@@@',props)

props.history.push('/aside')

}

return(

<>

主要视图区

主要展示区2

跳转到/aside

</>

)

}

**类式组件实现路由跳转**  

类式组件中使用this.props使用props  

**注意：**  

在类式组件中使用props时的事件方法，需要写成箭头函数，避免造成this指向不正确的问题

import { Component } from ‘react’

import ‘./index.sass’

export default class AsideThree extends Component{

changLink = ()=>{

this.props.history.push('/aside')

console.log('MMMM',this.props);

}

render(){

return(

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他