谈谈对Vue Router的理解

 更新时间:2022年11月08日 09:20:36   作者:Java陈序员  
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要介绍了对Vue Router的理解,需要的朋友可以参考下

1.1 相关理解

1.1.1 vue-router 的理解

Vue 的一个插件库,专门用来实现 SPA 应用

1.1.2 对 SPA 应用的理解

  • 单页 Web 应用(single page web application,SPA)
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
  • 数据需要通过 Ajax 请求获取

1.1.3 路由的理解

  • 什么是路由

    一个路由就是一组映射关系(key-value

    key 为路径, value 可能是 function 或 component

  • 路由分类

    后端路由:

    理解:value 是 function , 用于处理客户端提交的请求

    工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据

    2.前端路由:

    理解:value 是 component,用于展示页面内容

    工作过程:当浏览器的路径改变时,对应的组件就会显示。

1.2 基本路由

1.2.1 安装与使用

  • 安装 vue-router,命令:npm install vue-router

  • 应用插件:Vue.use(VueRouter)

编写 router 配置项:

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

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

//暴露router
export default router
  • 实现切换(active-class 可配置高亮样式)
 <router-link active-class="active" to="/about">About</router-link>
  • 指定展示位置
<router-view></router-view>
  • 几个注意点:

    路由组件通常存放在 pages 文件夹,一般组件通常存放在 components 文件夹

    通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载

    每个组件都有自己的 $route 属性,里面存储着自己的路由信息

    整个应用只有一个 router,可以通过组件的 $router 属性获取到

1.2.2 总结

编写使用路由的 3 步

  • 定义路由组件
  • 注册路由
  • 使用路由

1.3 嵌套(多级)路由

  • 配置路由规则,使用 children 配置项:
routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写:/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写:/message
   				component:Message
   			}
   		]
   	}
   ]

跳转(要写完整路径):

  • <router-link to="/home/news">News</router-link>
    

1.4 路由传参

1.4.1 路由的 query 参数

  • 传递参数
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
  • 接收参数:
$route.query.id
$route.query.title

1.4.2 命名路由

  • 作用:可以简化路由的跳转。

  • 如何使用

给路由命名:

{
	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:666,
            title:'你好'
		}
	}"
>跳转</router-link>

1.4.3 路由的 params 参数

  • 配置路由,声明接收 params 参数
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}
  • 传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

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

  • 接收参数:
$route.params.id
$route.params.title

1.4.4 路由的 props 配置

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

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

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

1.4.5 <router-link> 的 replace 属性

  • 作用:控制路由跳转时操作浏览器历史记录的模式
  • 浏览器的历史记录有两种写入方式:分别为 push 和 replacepush 是追加历史记录,replace 是替换当前记录。路由跳转时候默认为 push
  • 如何开启 replace 模式: <router-link replace .......>News</router-link>

1.5 编程式路由导航

  • this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  • this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  • this.$router.back(): 请求(返回)上一个记录路由
  • this.$router.go(-1): 请求(返回)上一个记录路由
  • this.$router.go( 1 ): 请求下一个记录路由

到此这篇关于谈谈对Vue Router的理解的文章就介绍到这了,更多相关Vue Router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-router安装和使用详解

    vue-router安装和使用详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,分步骤介绍了安装和使用vue-router的方法,感兴趣的朋友跟随小编一起看看吧
    2023-08-08
  • vue实现文字检索时候将搜索内容标红功能

    vue实现文字检索时候将搜索内容标红功能

    这篇文章主要介绍了vue中实现文字检索时候将搜索内容标红,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • checkbox在vue中的用法小结

    checkbox在vue中的用法小结

    之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录到脚本之家平台,供大家参考
    2018-11-11
  • Vue.js 表单校验插件

    Vue.js 表单校验插件

    这篇文章主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下
    2016-08-08
  • Vue2几种常见开局方式详解

    Vue2几种常见开局方式详解

    这篇文章主要为大家详细介绍了Vue2几种常见开局方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 通过一个简单的例子学会vuex与模块化

    通过一个简单的例子学会vuex与模块化

    这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • Vue 中如何将函数作为 props 传递给组件的实现代码

    Vue 中如何将函数作为 props 传递给组件的实现代码

    这篇文章主要介绍了Vue 中如何将函数作为 props 传递给组件的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue实现移动端触屏拖拽功能

    vue实现移动端触屏拖拽功能

    这篇文章主要为大家详细介绍了vue实现移动端触屏拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 一文搞懂Vue3中watchEffect侦听器的使用

    一文搞懂Vue3中watchEffect侦听器的使用

    今天我们来学习一下watch侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用,希望对大家有所帮助
    2022-07-07
  • Vue路由的懒加载深入详解

    Vue路由的懒加载深入详解

    这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块,只有在这个路由被访问到的时候,才会加载对应组件的代码块,需要的朋友可以参考下
    2022-12-12

最新评论