vue-router

最新推荐文章于 2022-10-25 14:57:07 发布

一杆梅子酒~

最新推荐文章于 2022-10-25 14:57:07 发布

阅读量99

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44144755/article/details/124886601

版权

路由

理解：一个路由(route)就是一组映射关系(key-value),多个路由需要多个路由器（router）进行管理
前端路由：key是路径，value是组件

1.基本使用

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)

编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../component/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new 	VueRouter({
    routes:[
       {
        path:'/about',
        component:About
       },
        {
            path:'/home',
            component:Home
        }
    ]
})
//暴露路由
export default router

实现切换（active-class可配置高亮样式）

<router-link active-class='active' to='/about'>About
    </router-link>

指定路由渲染位置
```
<router-view></router-view>
```

2.几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router,可以通过组建的$router属性获取

3.多级路由

配置路由规则，使用children配置项:

router:[
    {
        path:'/about',
        component:About,
    },
    path:'/home',
    component:Home,
    children:[
    //通过children配置子集路由
    {
    path:'news',//此处一定不要写:/news
    component:News
    },
    {
        //此处一定不要写：/message
     	path:'message',
         component:Message
        }
]
]

4.路由的query参数

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=88&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="{
path:'/home/message/detail'
query:{
    id:88,
    title:'你好'
}
}">跳转</router-link>

接收参数：
```
$router.query.id
$router.query.title
```

5.命名路由

作用：可以简化路由的跳转

如何使用

如何给路由命名

{
    path:'demo',
    component:Demo,
      children:[
      {
        path:'test',
        component:Test,
        children:[
         {
            //给路由命名
          name:'hello'，
          path:'welcome',
          component:Hello
            }
       ]
  }
      ]
}

简化跳转

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转
    </router-link>

<!--简化后，直接通过名字跳转 -->
 <router-link :to="{name:'hello'}">跳转
</router-link>

<!--简化写法配合传递参数 -->
<router-link
	:to="{
	name:"hello",
        query:{
            id:88,
             title:'你好'
        }
}"
跳转</router-link>

6.路由的params

配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xxx',
					//使用占位符声明接收params参数
					path:'detal/:id/:title',
					component:Detail
		}
			]
		}
	]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
    <router-link :to="/home/message/detail/666/你好">跳转</router-link>
	

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
        params:{
            id:88,
            title:'你好'
        }
        }">跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数：
```
$route.params.id
$route.params.title
```

7.路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
        //props:{a:999}

//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
        //props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
        props(router){
        return{
            id:route.query.id,
            title:route.query.title
        }
    }
}

8.的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别是push和replace，

push是追加历史记录，replace是替换当前记录。路由跳转是默认push
如何开启replace模式：<router-link replace .......>News</router-link>

9.编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活

具体实现

//$router的两个API
this.$router.push({
 name:'xiangqing',
    params:{
        id:xxx,
        title:xxx,
    }
})

this.$router.replace({
    name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//可前进可后退

10.缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

具体：

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

11.两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
具体：
1. activated路由组件被激活时触发(激活)
2. deactivated路由失活时触发(失活)

12.路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫：

//全局前置：全局拦截 	登录检测	动态添加路由表	addRoutes
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
    console.log('beforeEach',to,from)
    //判断当前路由是否需要进行权限控制
    if(to.meta.isAuth){
       //权限控制具体规则
  if(localStorage.getItem('school')==='atguigu'){
           //放行
      next()
        }else{
            alert('暂无权限')
            //next({name:'guanyu'})
        }
    }else{
        //放行
        next()
    }
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
    console.log('afterEach',to,from)
    if(to.meta.title){
        //修改网页的title
        document.title = to.meta.title
    }else{
        document.title = 'vue_test'
    }
})

独享守卫:

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫

//动态路由匹配组件是复用created等声明周期只执行一次，watch,beforeRouteUpdate
//进入守卫：通过路由规则，进入组件时被调用
beforeRouterEnter(to,from,next){},
//离开守卫，通过路由规则，离开该组件时被调用
    beforeRouterLeave(to,from,next){}

13.路由器的两种工作模式

对于一个url来说什么是hash值？—#及其后面的内容就是hash值
hash值不会含在HTTP请求中，即hash值不会带给服务器
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

一杆梅子酒~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router

路由理解：一个路由(route)就是一组映射关系(key-value),多个路由需要多个路由器（router）进行管理前端路由：key是路径，value是组件1.基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入路由组件import About from '../component
复制链接

扫一扫