Vue、React、wxApp三种路由跳转

Vue路由

1. 首先用Vue-cli脚手架搭建好vue项目，使用包管理工具npm下载vue-router，定义路由规则挂载到Vue实例上，设置路由出口router-view
2. path 路由路径
3. component 路由使用的组件
4. name 一般用在路由跳转
5. redirect 路由重定向
6. alisa 路由别名 这个路径名字也可以访问该页面
7. meta 路由属性 route 中可携带的属性 key-value 的形式存在

跳转可以使用router-link配合to属性完成跳转，最终转成a标签存在页面上
也可以使用js的形式完成跳转

this.$router.push() //在浏览记录中多追加一个并跳转到新的路由页面
this.$router.go(-1)//返回上一个浏览记录  
this.$router.replace()//跳转到新的路由页面，不会追加新的记录，原来页面的浏览地址会替换成当前的

  {
    path: '/fhtsTogeSelerList',//卖家列表
    name:'SelerList',
    component: () =>
      import('../views/fhtsTogeSelerList'), //路由赖加载
    meta: {
      keepAlive: true
    },
    alisa:"/SelerList"
  },

React路由

1. 在React中需要使用包管理工具npm下载react-router-dom,在使用的时候需要在Root这个dom节点外层包裹HashRouter或者BrowserRouter表示采用hash还是history路由模式
2. 需要在react-router-dom中引出 Switch Route Redirect
3. path 路由路径
4. component 路由使用的组件
5. to 重定向到那个组件

跳转可以使用link、navlink配合to属性完成跳转，最终转成a标签存在页面上
也可以使用js的形式完成跳转

this.props.history.push()

import React from 'react'
import {Switch,Redirect,Route,withRouter} from 'react-router-dom'
import titleText from './titleText'
 class Right extends React.Component{
    render(){
        return (
            <div  className="right">
               <Switch>
                   <Route path="/titleText" component={titleText}></Route>
               </Switch>
            </div>
        )
    }
}

export default withRouter(Right)

wxApp

在小程序使用路由有两种形式

1. navigator标签跳转 open-type设置跳转属性 url跳转路由地址 target默认是小程序站内跳转
2. api跳转
   2.1.navigator 普通跳转 不能跳转到tabBar页面
   2.2.switchTab 只能跳转到tabBar页面
   2.3redirect 跳转到的页面历史记录会替换当前记录 不会改变页面栈 不能跳转到tabBar页面
   2.4reLaunch 跳转后会清楚所有页面栈 除了不能跳转到tabBar页面
   2.5想了解更多推荐小程序官方文档
   2.6使用wx的api方法可以设置点击bindtap事件 触发wx.navigateTo({ url:‘’})

传参

三种页面传参都可以使用 ？key=value&kay1=value1…的形式。
在Vue中使用route接受，在React中使用props接受，在wxApp中使用propertise接受，Vue、React分别放到data、state中,wxApp可以直接在页面上使用，Vue数据双向绑定，React和wxApp需要使用setState、setData来更新页面

hash和history模式的简单直观的区别

在hash路径上会多一个#，路由跳转不会刷新页面，在history模式上路由跳转会刷新页面