怎么使用VueRouter4.x
这篇文章主要介绍了怎么使用VueRouter4.x的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用VueRouter4.x文章都会有所收获,下面我们一起来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到灯塔网站设计与灯塔网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖灯塔地区。
URL.hash与History
Vue Router中存在两种history
(记录历史路由),分别是URL.hash
和HTML5中提供的History
两种。
hash历史记录对于没有主机的Web应用程序(例如file://
),或当配置服务器不能处理任意的URL时非常有用,但是hash的SEO非常差劲;
History历史是HTML5中新增的,对于IE来说不是很友好,但是Vue3都放弃IE了,你也就不用考虑IE了;这种方式是目前最常见的一种方式,但是应用程序必须通过http协议被提供服务。
安装与使用流程
首先我们安装Vue Router,命令如下:
npm i vue-router
然后在main.js
中写入如下代码:
import { createApp } from 'vue' import App from './App.vue' // 1 引入 createRouter import { createRouter, createWebHistory } from 'vue-router' // 2 定义路由映射表 const routes = [ /* more router */ ] // 3 创建路由实例,并传递对应配置 const router = createRouter({ // history 模式 这里使用createWebHistory history: createWebHistory(), // 传递路由映射表 routes }) createApp(App).use(router).mount('#app')
上面的代码中的routes
如果多的话,可以定义一个router.js
文件,将其进行抽离,示例代码如下:
router.js
export default [ /* more router */ ]
main.js
import { createApp } from 'vue' import App from './App.vue' // 2 引入路由映射表 import routes from './router' // 1 引入 createRouter import { createRouter, createWebHistory } from 'vue-router' // 3 创建路由实例,并传递对应配置 const router = createRouter({ // history 模式 这里使用createWebHistory history: createWebHistory(), // 传递路由映射表 routes }) createApp(App).use(router).mount('#app')
或者**直接在****router.js
中直接导出一个路由实例,在main.js
**中使用即可(这种方式更常用)。
router-link和router-view
router-link
是Vue提供的自定义组件,用于创建链接,在Vue中并没有使用原生的,因为
改变URL后会重新加载页面而
不会;关于
组件的细节支持哪些属性,可以参考文档。
router-view
组件用于与URL对应的组件,例如下面这段代码:
然后我们的router.js
的代码如下:
import RootComponent from './components/root.vue' export default [ { path: '/', // 引入组件 component: RootComponent }, { path: '/hello', // 路由懒加载引入组件 component: () => import('./components/HelloWorld.vue') } ]
路由懒加载
当我们的应用越来越大时,打包后的JavaScript代码也会特别的大,这个时候需要我们将整个应用拆分为不同的块,而Vue Router就支持这个功能,我们只需要使用动态导入替换静态导入即可,就比如上面那段代码:
component: () => import('./components/HelloWorld.vue')
然后打包(webpack、Vite)工具就会将这些动态导入的组件单独打包,如下图所示:
动态路由
VueRouter允许我们动态的去设置路由匹配规则,例如我们现在有一个User
组件,组件的内容会根据不同的ID展示不同的内容,设置方法只需要通过:参数名
的形式去设置即可。
例如:
{ path: '/user/:id', component: () => import('@/components/User') }
在模板中跳转如下:
或者通过useRouter
这个hook提供的push
方法,例如:
import { useRouter } from 'vue-router' const {push} = useRouter() push({ path: '/user', params: { id: 10010 } }) // 或者 let id = 10010 push('/user/' + id)
获取路由地址可以通过useRoute
这个hook,用法与useRouter
一致。
匹配所有路由
VueRouter的动态路由允许我们匹配哪些没有匹配到的路由,示例代码如下:
{ path: '/:pathMatch(.*)', component: () => import('./components/Page404.vue'), },
当前面的路由匹配未成功时,就会匹配这个路由。
路由嵌套
现在我们有一个需求,就是在HelloWorld
组件下存两个组件,需要切换着两个组件。
这个时候路由嵌套的就发挥作用了,其实路由嵌套比较简单,就是通过路由配置中的一个children
属性来实现,示例代码如下:
HelloWorld.vue
Hello World
about user
router.js
{ path: '/hello', // 路由懒加载引入组件 component: () => import('./components/HelloWorld.vue'), children: [ { path: 'about', component: () => import('./components/about.vue'), }, { path: 'user', component: () => import('./components/user.vue'), }, ], },
子组件比较简单,只有一个标签
关于“怎么使用VueRouter4.x”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么使用VueRouter4.x”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
本文标题:怎么使用VueRouter4.x
转载注明:http://pwwzsj.com/article/gecods.html