vue 路由

Vue.js 路由小结

概述

Vue.js 是一个流行的前端JavaScript框架,其中的路由功能允许我们构建单页面应用(SPA),而无需服务器端渲染。Vue Router 是官方推荐的路由管理库,它为我们提供了声明式的路由配置和导航解决方案。

基本使用

安装

首先,我们需要安装 Vue Router。在使用 Vue CLI 创建项目时,可以选择包含 Vue Router。如果已经有了 Vue 项目,可以通过 npm 安装:

npm install vue-router

创建路由

创建路由很简单,只需使用 VueRouter 对象的 routes 属性即可。例如:

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [

{ path: '/home', component: Home },

{ path: '/about', component: About },

];

const router = new VueRouter({

routes, // (缩写) 等同于 routes: routes

});

使用路由

在 Vue 实例中,我们可以使用 <router-view> 组件来渲染匹配到的路由组件。然后,在我们的 HTML 模板中,我们可以使用 Vue Router 提供的导航组件,如 <router-link> 来创建链接。

<div id="app">

<router-view></router-view>

</div>

<nav>

<router-link to="/home">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

进阶配置

嵌套路由

Vue Router 支持嵌套路由,这在构建复杂的应用时很有用。我们可以在一个路由中定义另一个路由,这样就可以在一个页面上展示多个子视图。

const routes = [

{

path: '/parent',

component: ParentView,

children: [

{ path: 'child', component: ChildView },

{ path: 'other-child', component: OtherChildView },

],

},

];

命名路由

为了使路由更易于管理,我们可以为它们提供名称。这样,我们就可以在链接和重定向中使用这些名称,而不是硬编码路径。

const routes = [

{ name: 'home', path: '/home', component: Home },

{ name: 'about', path: '/about', component: About },

];

路由参数

我们还可以在路由中使用参数。参数使用冒号 ( : ) 标记,当匹配到一个路由时,参数值会被设置到 this.$route.params ,可以在每个组件内使用。

const routes = [

{ path: '/user/:username', component: User },

];

// 在组件中访问参数

this.$route.params.username;

通配符路由

通配符路由允许我们匹配所有路径或以特定前缀开始的路径。当使用一个通配符时, $route.params 内会自动添加一个名为 pathMatch 参数,它包含了 URL 通过通配符被匹配的部分。

const routes = [

{ path: '*', component: NotFoundView }, // 匹配所有路径

{ path: '/user-*', component: User }, // 匹配以 '/user-' 开头的任意路径

];

导航守卫

Vue Router 还提供了导航守卫,可以在路由切换之前或之后执行一些操作。我们可以使用 beforeRouteEnter , beforeRouteUpdate , beforeRouteLeave 等钩子函数来实现各种逻辑。

历史模式

Vue Router 支持两种历史模式: hash 和 history 。默认情况下,Vue Router 使用 hash 模式,URL 以 # 开头。如果我们希望使用 history API 来实现无 hash 的 URL,可以在创建 router 实例时指定 mode: 'history' 。

总结

Vue Router 为 Vue.js 提供了强大的路由管理功能,使得构建单页面应用变得简单而高效。通过灵活地配置路由、使用命名路由和路由参数、以及利用导航守卫和历史模式,我们可以轻松地管理应用的状态和导航。

相关推荐
牧羊狼的狼19 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手20 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one20 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲21 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell21 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830941 天前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮1 天前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel1 天前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常1 天前
我学习到的Vue2.6的prop修饰符
vue.js
gnip1 天前
JavaScript事件流
前端·javascript