vue-router4.0,vue router教程

　　目前Vurouter的最新版本是4.X，本文主要介绍如何快速上手VueRouter4.x的10分钟教程，有一定的参考价值。感兴趣的朋友可以参考一下。

目录

　　写在前面URL.hash和History安装和使用过程router-link和Router-View Router-Link Router-View route lazy loading动态路由匹配所有路由都嵌套在最后。

写在前面

　　Erouter是Vue团队开发的路由插件，与Vue.js核心深度集成，使得Vue构建单页程序非常简单。vurouter的最新版本是4。x，也是Vue3推荐的。在本文中，我们来了解一下vurouter 4.x。

URL.hash与History

　　eRouter中有两种历史，即URL.hash和HTML5中提供的历史。

　　Hash history对于没有主机(比如file://)的Web应用或者配置服务器无法处理任意URL，但是Hash的SEO很差的时候非常有用；

　　历史历史在HTML5中是新的，对IE不是很友好，但是Vue3已经放弃IE了，不用考虑IE；这种方法是目前最常用的一种，但是应用程序必须由http协议提供服务。

安装与使用流程

　　首先，我们使用以下命令安装Vue路由器：

　　npm路由器

　　然后在main.js中编写以下代码：

　　从“vue”导入{ createApp }

　　从导入应用程序。/App.vue

　　//1介绍创建路由器

　　从“vue-router”导入{ createRouter，createWebHistory }

　　//2定义路由映射表

　　常量路由=[

　　/*更多路由器*/

　　]

　　//3创建路由实例，并传递相应的配置。

　　const router=createRouter({

　　//此处使用了历史模式createWebHistory

　　history: createWebHistory()，

　　//传递路由映射表

　　路线

　　})

　　createApp(应用程序)。使用(路由器)。挂载(#app)

　　如果上面的代码中有很多路由，可以定义一个router.js文件，提取出来。示例代码如下：

　　router.js

　　导出默认值[

　　/*更多路由器*/

　　]

　　主页. js

　　从“vue”导入{ createApp }

　　从导入应用程序。/App.vue

　　//2介绍路由映射表

　　从导入路线。/路由器

　　//1介绍创建路由器

　　从“vue-router”导入{ createRouter，createWebHistory }

　　//3创建路由实例，并传递相应的配置。

　　const router=createRouter({

　　//此处使用了历史模式createWebHistory

　　history: createWebHistory()，

　　//传递路由映射表

　　路线

　　})

　　createApp(应用程序)。使用(路由器)。挂载(#app)

　　或者* *直接在* * * router . js中直接导出一个路由实例，在main . js * *中使用即可(这种方法比较常用)。

router-link和router-view

router-link

　　Router-link是Vue提供的自定义组件，用于创建链接。Vue中不使用本机A，因为A会在更改URL后重新加载页面，但router-link不会。有关路由器链路组件支持哪些属性的详细信息，请参考文档。

router-view

　　路由器视图组件用于对应URL的组件，如以下代码：

　　模板

　　路由器-链接到=/hello

　　img alt=Vue logo src=。/assets/logo.png

　　//路由器链接

　　路由器视图/路由器视图

　　/模板

　　那么我们router.js的代码如下：

　　从“”导入RootComponent。/components/root.vue

　　导出默认值[

　　{

　　路径：“/”，

　　//引入组件

　　组件：RootComponent

　　},

　　{

　　路径：“/hello”，

　　//路由延迟加载传入组件

　　组件：()=导入(。/components/hello world . vue’)

　　}

　　]

　　有关其他配置项目，请参考文档。

　　代码的运行结果如下：

路由懒加载

　　当我们的应用越来越大的时候，打包的JavaScript代码就会特别大。这时候我们需要把整个应用拆分成不同的块，Vue路由器就支持这个功能。我们只需要使用动态导入替换静态导入即可，比如上面的代码：

　　组件：()=导入(。/components/hello world . vue’)

　　然后打包(webpack，Vite)工具会将这些动态导入的组件分别打包，如下图所示：

动态路由

　　VueRouter允许我们动态设置路由匹配规则。比如我们现在有一个用户组件，组件的内容会根据不同的id显示不同的内容。设置方法只需要以参数名的形式设置即可。

　　例如：

　　{

　　路径：“/user/:id”，

　　component:()=import( @/components/User )

　　}

　　在模板中跳转如下：

　　路由器链接到=/user/10010 /路由器链接

　　或者hook useRouter提供的push方法，例如：

　　从“vue路由器”导入{ useRouter }

　　const {push}=useRouter()

　　推({

　　路径：“/用户”，

　　参数：{ id: 10010 }

　　})

　　//或者

　　让id=10010

　　推送(/user/ id)

　　可以通过useRoute的hook得到路由地址，和useroute的用法一致。

匹配所有路由

　　VueRouter的动态路由允许我们匹配哪些路由不匹配。示例代码如下：

　　{

　　路径：“/:pathMatch(。*),

　　组件：()=导入(。/components/Page404.vue )，

　　},

　　当之前的路由匹配不成功时，将匹配这条路由。

路由嵌套

　　现在我们有一个需求，就是在HelloWorld组件下存储两个组件，我们需要切换这两个组件。

　　这时候路由嵌套就发挥作用了。其实路由嵌套比较简单，就是通过路由配置中的一个children属性来实现。示例代码如下：

　　HelloWorld.vue

　　模板

　　h1你好世界/h1

　　差异

　　style=

　　显示器：flex

　　justify-content:space-between；

　　宽度：240px

　　边距：0自动；

　　路由器链接到= about about/路由器链接

　　路由器链接到=用户用户/路由器链接

　　/div

　　路由器视图/路由器视图

　　/模板

　　router.js

　　{

　　路径：“/hello”，

　　//路由延迟加载传入组件

　　组件：()=导入(。/components/HelloWorld.vue )，

　　儿童：[

　　{

　　路径：“关于”，

　　组件：()=导入(。/components/about.vue )，

　　},

　　{

　　路径：“用户”，

　　组件：()=导入(。/components/user.vue )，

　　},

　　],

　　},

　　子组件相对简单，只有一个h1标签，最终效果如下：

写在最后

　　关于VueRouter4.x教程10分钟入门的这篇文章到此结束。有关VueRouter4.x入门的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！