reactrouter@4和vue路由详解（全）react router @4 和 vue路由
本⽂⼤纲：
1、vue路由基础和使⽤
2、react-router @4⽤法
3、什么是包容性路由？什么是排他性路由？
4、react路由有两个重要的属性：children和render的区别？
5、react如何在路由⾥⾯定义⼀个⼦路由？
6、vue如何在路由⾥⾯定义⼀个⼦路由？
7、react怎么通过路由传参？
8、vue怎么通过路由传参？
9、怎么在react⾥拿到router对象？
10、怎么在vue⾥拿到router对象？
11、路由怎么回退？
12、react路由守卫？
13、vue路由守卫？
1、vue路由基础和使⽤
a、⼤概⽬录
我这⾥建了⼀个router⽂件夹，⽂件夹下有index.html
b、准备⼯作：
npm install vue-router
或者 yarn add vue-router
c、配置
必须要通过 Vue.use() 明确地安装路由功能：
在你的⽂件夹下的 src ⽂件夹下的 main.js ⽂件内写⼊以下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
附上我的代码：我是将router的内容写在了我的router⽂件夹下的index.html中，然后暴露出去，在main.js中引⼊
router⽂件夹下的index.html
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from 'pages/Home'
import Map from 'components/Map'
import Home1 from 'components/Home1'
import Find from 'components/Find'
import Mine from 'components/Mine'
import Type from 'components/Type'
import Publish from 'components/Publish'
import Search from 'components/Search'
import Success from 'components/Success'
import Need from 'components/Need'
import Position0 from 'components/Position'
import Like from 'components/scrollX/Like'
import S1 from 'components/scrollX/1'
import S2 from 'components/scrollX/2'
import Listall from 'components/mine/Listall'
import Listone from 'components/mine/Listone' import Listchange from 'components/mine/Listchange' const routes = [
{
path:'/',
redirect:'/ho'
},
{
path: '/ho',
redirect:'/ho/home',
component: Home,
children: [
{
name: 'home',
path: 'home',
component: Home1,
redirect:'/ho/home/like',
children :[
{
name: 'like',
path: 'like',
component: Like
},
{
name: '2000001',
path: '2000001',
component: S1
},
{
name: '2000022',
path: '2000022',
component: S2
}
]
},
{
name: 'type',
path: 'type',
component: Type
},
{
name: 'need',
path: 'need',
component: Need
},
{
name: 'find',
path: 'find',
component: Find
},
{
name: 'mine',
path: 'mine',
component: Mine
}
]
},
{
name: 'search',
path: '/search',
component: Search
},
{
name: 'position',
path: '/position',
component: Position0
},
{
name: 'publish',
path: '/publish',
component: Publish
},
{
name: 'success',
path: '/success',
component: Success
},
{
name: 'listall',
path: '/listall',
component: Listall
},
{
name: 'listone',
path: '/listone',
component: Listone
},
{
name: 'listchange',
path: '/listchange',
component: Listchange
},
{
name: 'map',
path: '/map',
component: Map
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.use(MintUI)
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
d、常规使⽤
<router-view></router-view>路由匹配到的组件将渲染在这⾥
你可以把他理解为⼀个版块，⽐如现在有⼀个home页⾯，分为两部分，内容部分和ibar部分，如图：
这五个页⾯共⽤下⾯的导航栏，只有导航栏上⾯的内容不同
<router-view></router-view>就可以写在<Ibar></Ibar>的上⾯
<template>
<div class="home">
<router-view></router-view>
<Ibar></Ibar>
</div>
</template>
那么在Ibar页⾯中如何切换路由呢？
<template>
<div class="ibar">
<router-link to="/ho/home" tag="span" active-class="active">⾸页</router-link>
<router-link to="/ho/type" tag="span" active-class="active">类别</router-link>
<router-link to="/ho/need" tag="span" active-class="active">需求</router-link>
<router-link to="/ho/find" tag="span" active-class="active">发现</router-link>
<router-link to="/ho/mine" tag="span" active-class="active">我的</router-link>
</div>
</template>
注意：此处的tag=“span”代表这个按钮是个span标签，你可以写样式的时候直接写span标签的样式即可 此处的active-class="active"代表点击哪个按钮哪个按钮⾼亮
此时我们详细看⼀下router⽂件夹下的index.js
//引⼊vue
import Vue from 'vue'
//引⼊路由
import VueRouter from 'vue-router'
//把路由挂载到vue上
Vue.use(VueRouter)
//引⼊我各个路由对应的component组件
import Home from 'pages/Home'
import Map from 'components/Map'
import Home1 from 'components/Home1'
import Find from 'components/Find'
import Mine from 'components/Mine'
import Type from 'components/Type'
import Publish from 'components/Publish'
import Search from 'components/Search'
import Success from 'components/Success'
import Need from 'components/Need'
import Position0 from 'components/Position'
import Like from 'components/scrollX/Like'
import S1 from 'components/scrollX/1'
import S2 from 'components/scrollX/2'
import Listall from 'components/mine/Listall'
import Listone from 'components/mine/Listone'
import Listchange from 'components/mine/Listchange'
const routes = [
{
//path是路由的路径
path:'/',
//redirect代表重定向，因为当前路径'/'并没有对应的组件，所以需要重定向到其他路由页⾯
redirect:'/ho'
},
{
path: '/ho',
redirect:'/ho/home',
//当不需要重定向的时候，需要component写上当前路由对应的组件页⾯
component: Home,
//有些路由还有⼦路由，需要⽤到children[],
vue element admin //当访问的时候，<router-link>的属性to的时候要把所有的⽗组件都带上 //如：此处的/ho/home/like
children: [
{
name: 'home',
path: 'home',
component: Home1,
redirect:'/ho/home/like',
children :[
{
name: 'like',
path: 'like',
component: Like
},
{
name: '2000001',
path: '2000001',
component: S1
},
{
name: '2000022',
path: '2000022',
component: S2
}
]
},
{
name: 'type',
path: 'type',
component: Type
},
{
name: 'need',
path: 'need',
component: Need
},
{
name: 'find',
path: 'find',
component: Find
},
{
name: 'mine',
path: 'mine',
component: Mine
}
]
},
{
name: 'search',
path: '/search',
component: Search
},
{
name: 'position',
path: '/position',
component: Position0
},
{
name: 'publish',
path: '/publish',
component: Publish
},
{
name: 'success',
path: '/success',
component: Success
},
{
name: 'listall',
path: '/listall',
component: Listall
},
{
name: 'listone',
path: '/listone',
component: Listone
},
{
name: 'listchange',
path: '/listchange',
component: Listchange
},
{
name: 'map',
path: '/map',
component: Map
}
]
const router = new VueRouter({
//此处设置mode为history，即不带#号，在处理数据的时候会更⽅便⼀些
mode: 'history',
//ES6的写法，即routes：routes的简写，当key和value名字⼀样时，可简写
})
//把你创建的路由暴露出去，使得main.js可以将其引⼊并使⽤
export default router
引申1：
路由有⼀个meta属性
可以给该路由挂载⼀些信息
设置⼀些⾃⼰title、显⽰隐藏、左右滑动的⽅向之类的
meta: {
title: "HelloWorld", 要现实的title
show: true设置导航隐藏显⽰
}
使⽤的时候：this.$a.show
<Bottom v-show="this.$a.show"></Bottom>
引申2:
动态路由
{
path:"/two/:id",
component:Two,
}
获取数据this.$route.params.动态路由的名字
此处是:this.$route.params.id
引申3:
路由别名alias
{
path: '/a',
component: A,
alias: '/b'
}
// /a 的别名是 /b
//意味着，当⽤户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a
//就像⽤户访问 /a ⼀样
//简单的说就是给 /a 起了⼀个外号叫做 /b ，但是本质上还是 /a
2、react-router @4⽤法
a、⼤概⽬录
不需要像vue那样⿇烦的⽤到⼀个单独的⽂件夹，react只需要在index.js中部分配置即可
b、准备⼯作
yarn add react-router-dom
index.js中
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter>
<App />
</BrowserRouter>
这样App内部组件都可以使⽤
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论