vue-router基础详解
vue-router
路由:一个路由就是一组映射关系,key为路径,value可能是组件或者函数。也就是路径与组件或者函数之间的映射关系
vue-router是vue的一个插件,可以用来实现SPA单页面应用的切换
1.创建路由
在src下创建router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由对象
import login from '@/views/login' //需要引入组件
Vue.use(VueRouter) //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
{
*// 登录页面路由路径*
path: '/login',
name:'login',
component: () => import('@/views/login') //组件名
*// #这里是路由懒加载的写法*
*// #完整写法是:@/views/login/index.vue,但是index.vue可以省略,导入一个目录时默认导入目录下的index.vue*
*// # @符号指的是项目的src目录*
*// component: login 这个是传统写法,加载速度慢,因为是加载的时候会全部都加载,所以较慢*
children:[
//嵌套路由或者叫多级路由
]
},
]
//生成路由对象用规则
const router = new VueRouter({
routes
})
//向外导入路由对象
export default router
2把路由对象注入到new vue() 实例中,进入main.js
new Vue({
router, //注入路由对象
store,
render: *h* => h(App)
}).$mount('#app')
3.在那个界面使用就在那个界面设置
<router-view > </router-view>
2.基本路由切换
<router-link to="./home"> </router-link> 点击切换界面
//这个渲染到界面还是a标签
1.router-link的replace属性:替换掉当前占用的那一条,浏览器历史记录中始终只有一条,再开启这个属性模式时,浏览器左上角可以观察到前进后退按键无效了
<router-link replace to="./home"> </router-link> 点击切换界面
//这个渲染到界面还是a标签
默认情况下,开启的是push模式
2几个注意点:被切换后的组件都被销毁了 ,切换过程就是挂载和销毁的过程,
每个组件都有自己的$route属性,里面存储着自己的路由信息
整个应用只有一个router,可以通过组件的$router属性获取
3.嵌套路由
在创建的路由规则中配置children:[ 路由规则 ],例子如下
// 路由规则数组*
const routes = [
{
*// 登录页面路由路径*
path: '/login',
name:'login',//路由的名字,起名一定要见名知意
component: () => import('@/views/login') //组件名
children:[
//嵌套路由或者叫多级路由
path: 'home', //路径名称不用在加斜杠“/”
name:'home',
component: () => import('@/views/home') //组件名
]
},
]
4.路由传参
1.query参数
问号后面的就是query参数
跳转路由,to字符串写法
<router-link to="/home?id=2&name="hahh"> </router-link>
跳转路由,to对象写法,(推荐使用对象写法)
<router-link to="{
path:"/home"
query:{
id:2
name:"hahh" //实践中大多写变量,这里展示就写了常量
}
}"> </router-link>
取出参数 的方法
$route.query.id //在使用的地方使用即可
2.params参数
跳转路由,to字符串写法
<router-link to="/home/2/hahh> </router-link>
跳转路由,to对象写法,(推荐使用对象写法)
<router-link to="{
//path:"/home"
name:"home" //使用to对象写法,就不能使用path配置项了,必须使用name配置。
params:{
id:2
name:"hahh" //实践中大多写变量,这里展示就写了常量
}
}"> </router-link>
特别注意路由携带params参数的时候,使用to对象写法,就不能使用path配置项
了,必须使用name配置。
这样传值需要提前在路由规则路径path中占位,如下:
// 路由规则数组*
const routes = [
{
*// 登录页面路由路径*
path: '/login',
name:'login',//路由的名字,起名一定要见名知意
component: () => import('@/views/login') //组件名
children:[
//嵌套路由或者叫多级路由
path: 'home/:id/:name', //使用占位符声明接收params参数
name:'home',
component: () => import('@/views/home') //组件名
]
},
]
3.路由的props配置
在路由规则中props的三种配置方法:
// 路由规则数组*
const routes = [
{
*// 登录页面路由路径*
path: '/login',
name:'login',//路由的名字,起名一定要见名知意
component: () => import('@/views/login') //组件名
第一种写法:值为对象,对象中的值会以prop的形式传给组件,使用较少,传递的是死数据
props:{
id:1,
name:nihao
}
第二种写法:当布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给组件
props:true
第三种写法:值为函数,返回值必须是对象,推荐使用这种
props($route){
retuen {
id:$route.query.id,
}
}
},
]
在组件中使用props接收:
<script>
export default {
name:"组件名",
props:['id','name']
}
</script>
5.编程式路由导航
应用场景:由于router-link编译后是a标签,当我们需要编译后标签是其他的,如button的时候,可以采用这种方式,不借助router-link的路由导航,,点击按钮,切换路由
通过$router中的push和replace来实现**
<template>
<div>
<button @click="pushShow"> 按钮</button>
</div>
</template>
<script>
export default {
methods:{
pushShow(){
this.$router.push({
//跟声明式一样,也可以传值
name:'home',
query:{
id:1,
name:hah
}
})
}
}
}
</script>
常用路由$router方法:后退:back() ,前进:forward() ,go(传入参数正数 3前进三步,负数-3,后退三步)
6.缓存路由组件
路由切换后,组件被销毁,我们想缓存一些组件,
<template>
<div>
//要写include,不写的话就会缓存这个路由挂载点的所以组件
<keep-alive :include ="["要缓存的组件名","要缓存的组件名"]">
<router-view > </router-view>
<keep-alive>
</div>
</template>
7.路由下组件独有的两钩子函数
//激活:当组件切换显示出来的时候
activated(){
}
//失活:当组件被切换走看不见的时候
deactivated(){
}
可以在这两种状态下做一些事情
//nextick(){}
8.路由守卫
路由守卫:对路由进行权限控制 ,
分类有:全局守卫,独享守卫,组件内守卫
1.全局守卫
1.全局前置路由守卫
切换前鉴权
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由对象
import login from '@/views/login' //需要引入组件
Vue.use(VueRouter) //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
{
path: '/login',
name:'login',
component: () => import('@/views/login') //组件名
//路由元信息,可以自定义
meta:{
isAuth:false //用来判断这个路由需不需要做权限判断,在不需要做权限校验的路由可以不写,只在需要的写,值为true就可以
}
},
]
//生成路由对象用规则
const router = new VueRouter({
routes
})
//全局前置路由守卫,在路由切换之前就调用,还有就是在初始化的时候会调用一次
//to表示去哪里,From是从哪里来,next
router.beforeEach((to,From,next)=>{
// 。。。。。。在这里判断要不要放行:例子如下;
//通过to.path判断path或者name,是不是要守卫的路由,不是的话直接放行
if(to.meta.isAuth){
if(to.path ==='/home/news' || to.path ==='/home/message' ){
//如果是在判断token是否符合,或者其他条件是否符合
if(localStorage.getItem('school') === 'atguigu'){
next() //不写这个不会放行
}else{
conlse.log('您没有权限查看此页面')
}
}else{
next()
}
}
})
//向外导入路由对象
export default router
2.全局后置路由守卫
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由对象
import login from '@/views/login' //需要引入组件
Vue.use(VueRouter) //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
{
path: '/login',
name:'login',
component: () => import('@/views/login') //组件名
//路由元信息,可以自定义
meta:{
isAuth:false //用来判断这个路由需不需要做权限判断,在不需要做权限校验的路由可以不写,只在需要的写,值为true就可以
title:"主页" //后置路由获取,可以改变网页标题
}
},
]
//生成路由对象用规则
const router = new VueRouter({
routes
})
//全局后置路由守卫,在路由切换之后就调用,还有就是在初始化的时候会调用一次
//to表示去哪里,From是从哪里来,后置没有next
//能来到这里,就代表通过了前置路由守卫权限
router.afterEach((to,From)=>{
})
//向外导入路由对象
export default router
2.独享路由守卫
独享路由守卫是在在路由规则内进行配置,只想对一个路由进行限制,一个路由独享的意思。独享路由守卫只有前置,没有后置,可以和全局后置配合使用,例子如下;
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由对象
import login from '@/views/login' //需要引入组件
Vue.use(VueRouter) //添加vue.use()身上
*// 创建路由规则数组*
const routes = [
{
path: '/login',
name:'login',
component: () => import('@/views/login') //组件名
//独享路由守卫 beforEnter,其他与全局前置路由守卫一样
beforeEnter((to,From,next)=>{
.....
})
},
]
//生成路由对象用规则
const router = new VueRouter({
routes
})
//向外导入路由对象
export default router
3.组件内守卫
不在路由配置文件内写了,在组件内去写,通过路由规则进入该组件时被调用,一定是通过路由规则进入的才会
<template>
<div>
</div>
</template>
<script>
export default {
methods:{},
//通过路由规则,进入该组件时被调用
beforeRouterEnter(to,from,next){
}
//通过路由规则,进入该组件时被调用
beforeRouterLeave(to,from,next){
}
}
</script>
9.history模式和hash模式
明天会进行更新,今天太晚了
转载自:https://juejin.cn/post/7144766727669153829