vue-router路由属性整理

最新推荐文章于 2024-04-15 16:14:11 发布

哎呦、好家伙

最新推荐文章于 2024-04-15 16:14:11 发布

阅读量2.9k

点赞数 1

文章标签： vue.js 前端 vue

本文链接：https://blog.csdn.net/HwH66998/article/details/105569286

版权

本文详细介绍了Vue Router的核心特性，包括路由懒加载以减少初次加载时的等待时间，以及不同类型的路由守卫实现精细化的页面控制。通过路由懒加载，可以将大型应用的不同页面分散加载，提升用户体验。同时，文章讨论了全局前置和后置守卫，以及路由独享和组件内守卫的使用场景和实现方式，帮助开发者更好地理解和运用Vue Router的高级功能。

摘要由CSDN通过智能技术生成

什么是路由：根据url分配到对应的处理程序

redirect路由重定向

代码：

 const routes = [
	{
   
		path:'/',
		redirect:'/home'//路由重定向
	},
	{
   
		path:'/home',
		component:Home
	}
	]

在router实例里加上mode："history"去掉URL路径#号(hash模式)改成history模式，必须要和服务器配合起来，不然会崩

代码:

	const router = new VueRouter({
   
	routes,
	mode:"history"//修改默认hash模式为history模式
	})

路由缓存：路由切换时数据内容不会被销毁,如在第一个页面文本框输入了内容，切换内容销毁
keep-alive的两个属性：include：只有匹配的组件会被缓存
exclude:匹配的组件不会被缓存
keep-alive是vue实例内置的组件

<keep-alive exclude="Home,About">//通过组件的name属性来匹配
<router-view></router-view>
</keep-alive>

router-link默认会渲染成a标签，更改默认标签属性tag; router-link切换路由会有缓存(默认是H5的history.pushState()栈方法)，清楚缓存，不能回退页面replace（是H5的history.replaceState()替换方法）

<router-link to:"/home" tag="button" replate>首页</router-link>//router-link会被渲染成button标签，并且切换路由不能回退

router-link被点击会有默认的样式，设置样式router-link-active,如果不想使用这个样式名，可以在router-link设置属性

.router-link-active{
   
color:#f00;//选中后文字为红色
}

<router-link to:"/home" active-class="active">首页</router-link>//修改路由选中后的样式名
//如果router-link较多，可以在router实例中添加属性修改
 const router=new VueRouter({
   
	routes,
	linkActiveClass