vue-router
1,创建项目
vue create mine
vue ui
2,创建组件并引用
首先，在src文件夹下创建XXX.vue 然后，在router.js中引入import 模块名 from './XXX.vue'
xport default new Router({
mode: 'history',//默认是hash区别：hash链接上面有#号
base: process.env.BASE_URL,
routes: [
{
path: '/',
component:模块名
}
})
3,路由
在App.vue中 利用<router-link to="router.js中配置的路径"></router-link>//用于占位会把对应路径的组件的内容渲染在该位置
4,子路由
首先，需要在父组件中占位
例：
About.vue
<template>
<div class="">
<router-view/>//利用router-view占位
<router-link to="./about/a"></router-link>(可以写在App.vue或父组件中)
</div>
</template>
然后，在router.js中进行配置
{
path: '/about',
component: About,
name:'about'
children: [
{
path: 'a',
component: A
}
]
}
3,传参
方法一：例：
App.vue
<router-link :to="{name，params:{id:111,name:about}"相当于给名叫name的组件传入两个新的属性 分别是id和name
(name是指在router,js中name属性所对应的value)
* 在页面内渲染的方式
{{$route.params.id}}
方法二： 利用url传参
例：
App.vue
<router-link to="path/111"//111也可以不写，直接在url链接上也可以获取
同时需要在router.js中更改path:'/about/:id'id是给传递的参数取的属性名
* 在页面内渲染的方式
{{$route.params.id}} 更改网页链接也可以直接在页面内获取到更改后的值
4,重定向
在router.js中
{
path:'./',
redirect:'/about'
}
重定向的path路径也可以传递参数
当访问/时会自动重定向到about组件的页面内
5,alias起别名
在router.js中
{
path:'/'
alias:'xs'
}
在url链接中直接访问别名也可以跳转到该组件页面中
6，起别名和重定向的区别
alias:只是path路径的名字被改变重定向：重定向的路径需要真实存在
7，路由过渡
transition
<transition name="fade">//fade是随意起的名字用于在css页面内设置过渡样式
<router-view/>
</transtion>
<style>
.fade-enter{
}//进入过渡之前
.fade-enter-to{
}//结束状态
.fade-enter-active{
}//进入过渡时期的状态
.fade-leave{
}//离开过渡之前
.fade-leave-to{
}//离开时的结束状态
.fade-leave-active{
}//离开时的过渡时期的状态
8，mode&404
mode:'hash/history' 默认情况下时hash 链接上多了一个# 处理404{
path:'/*',
component:Error
}用于访问没有配置的路径
9，路由钩子函数
在router.js中的export default new Router（{
router:[],
1，beforeEnter:(to,from,next) =>{
//to 是跳转后 from是跳转前 router是路由的控制参数
}
2，beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave
}）
10,编程式导航
在App.vue中例：<button @click="gopage()">页面跳转</button>
<button @click="go()">前进</button>
<button @click="back()">后退</button>
script>
import hello from '@/components/hello.vue'
export default {
data() {
return {
msg: '放假啦'
}
},
components: {
tpl: hello
},
methods: {
gopage() {
this.$router.push('/about')//利用函数的方法进行了页面的跳转
},
go(){
this.$router.go(2)
},
back(){
this.$router.back() // this.$router.go(-1)
}
}
}
</script>
11，引入组件
在VUE中引入小组件<script>
import hello from '@/components/hello.vue'
export default {
data() {
return {
msg: '放假啦'
}
},
components: {
hello
}
}
</script>
在html内引用利用组件名称 驼峰式
react-router
1,创建项目
npm install -g create-react-app
create-react-app react-app
cd react-app
npm start
npm install --save react-router-dom
2,引入
import {BrowserRoute ras Router, Route, Link} from ‘react-router-dom’
//相当于引入了三个组件
BrowserRouter可以换成hashRourter 链接中多了一个#
快捷键rcc等同于
import React {component} from ‘react’;
class App extends Component{
render(){
return(
<div>
</div>)
}
}
export default App
3，渲染到html页面
方法一：
<Router>
<Link to="/a">go to page A</Link><br/> //路由的跳转
<Route path="/a" component={A} ></Route>//每引入一个组件都需要import
</Router>
方法二：
<Router>
<Link to="/a">go to page A</Link><br/> //路由的跳转
<Route path="/a"render={
() =>{
return(
<div>
page a
</div>)
}
} ></Route>//render 是定义的一个方法
可以简写成<Route path="/a" render={()=>{<div>page a</div>}}
</Router>
方法三：
<Router>
<Link to="/a">go to page A</Link><br/> //路由的跳转
<Route path="/a" children={A} ></Route>//每引入一个组件都需要import
</Router>
* 利用children定义组件无论是否匹配都会被渲染到每一个组件页面内
* 使用children定义组件时不能用在switch语句中，因为switch语句只能够匹配第一个符合条件的组件，不会把每一个children定义的组件渲染到页面中
* 引入的组件必须是利用const函数形式定义的
4，Switch语句
需要在App.js中引入import {BrowserRoute ras Router, Route, Link，Switch} from "react-router-dom "
<Switch>
<Route path="/a" component={A}></Route>
<Route path="/" component={Home}></Route>
</Switch>
React 默认是模糊匹配，匹配的是第一个符合条件的组件，如果使用Switch,需要把path='/' 放到最后 或在路径path前加入exact 表示严格匹配路由
5，传参
<Link-to="/b/111"></Link>//传递参数111
<Route path="/b/:id"></Route>为传递过来的参数设置了形参名为id
在子页面渲染的方式
{this.props.match.params.id} 也可以通过解构赋值来简写
通过match来接收路由传递的信息
