vue全家桶进阶之路34:Vue3 路由基本配置
在Vue3中,路由的基本配置是通过使用Vue Router库来实现的。以下是Vue3中路由的基本配置步骤:
- 安装Vue Router
使用npm或yarn在项目中安装Vue Router:
- npm install vue-router
- // 或者
- yarn add vue-router
- 创建路由实例
创建一个路由实例并定义路由规则。路由规则是一个对象数组,其中每个对象都定义了一个路由的路径和组件。
例如,以下代码定义了两个路由规则:
- import { createRouter, createWebHistory } from 'vue-router';
- import Home from './components/Home.vue';
- import About from './components/About.vue';
- const routes = [
- { path: '/', component: Home },
- { path: '/about', component: About }
- ];
- const router = createRouter({
- history: createWebHistory(),
- routes
- });
- export default router;
在这个例子中,我们导入了createRouter
和createWebHistory
函数。createRouter
函数用于创建路由实例,createWebHistory
函数用于指定路由的历史记录模式。我们还定义了两个路由规则:一个路由规则对应路径'/'
,另一个对应路径'/about'
。这些路由规则将路由到Home
和About
组件。
在 Vue Router 中,routes
是一个数组,用于定义路由规则。每个路由规则都包含了如下属性:
path
:一个字符串,表示路径,可以包含动态片段和参数(如/users/:id
)。name
:一个字符串,表示路由的名称,方便在代码中引用。component
:一个组件,表示该路由对应的视图组件。components
:一个对象,表示该路由对应的多个视图组件。redirect
:一个字符串或者一个函数,表示路由重定向的目标,可以是一个路径或者是一个具有to
属性的对象。alias
:一个字符串或者一个数组,表示路由的别名,访问别名等同于访问路由本身。meta
:一个对象,表示该路由的元信息,用于存储一些额外的信息(如页面标题、是否需要登录等)。
除了上述常用属性之外,还有一些其他的属性用于更高级的路由管理,例如:
beforeEnter
:一个函数,表示路由独享的守卫,用于在路由切换前执行一些操作。props
:一个布尔值或者一个函数,表示是否将组件的props
属性和 URL 参数映射到组件的 props 属性中,或者自定义如何映射。caseSensitive
:一个布尔值,表示该路由是否区分大小写,默认为 false。pathToRegexpOptions
:一个对象,用于配置 path-to-regexp 库的选项。children
:一个数组,表示该路由的子路由,用于实现嵌套路由。
路由规则可以通过一个对象或者一个数组来定义,例如:
- // 定义单个路由规则
- const homeRoute = {
- path: '/',
- name: 'Home',
- component: Home
- }
- // 定义多个路由规则
- const routes = [
- {
- path: '/',
- name: 'Home',
- component: Home //组件名方式加载
- }, { path: '/about', name: 'About',
- component: () => import("../views/AboutView.vue"),// 懒加载
- meta: { requiresAuth: true } } ]
在 Vue Router 中,可以使用两种不同的 history 模式:hash
和 history
。
createWebHashHistory()
:使用 URL 的 hash(即 URL 中的#
)来模拟一个完整的 URL。这种模式的优点是在不支持 HTML5 History API 的浏览器中也可以正常使用,缺点是 URL 比较丑陋,不利于 SEO。createWebHistory()
:使用 HTML5 History API 来实现路由,URL 是真实的 URL,不需要#
符号。这种模式的优点是 URL 更加美观,不会出现#
符号,缺点是需要浏览器支持 HTML5 History API,如果不支持则会出现兼容性问题。
在创建路由器实例时,需要通过 createWebHashHistory()
或者 createWebHistory()
函数来创建一个 history 对象。例如:
- const router = createRouter({
// 使用 history 模式- history: createWebHistory(),
- routes,
- });
- const router = createRouter({
// 使用 hash 模式- history: createWebHashHistory(),
- routes,
- });
在 Vue 中,可以使用 <router-view>
标签来承载路由。<router-view>
标签会根据当前的路由信息动态渲染对应的组件。例如:
- <template>
- <div>
- <router-link to="/">Home</router-link>
- <router-link to="/about">About</router-link>
- <router-view></router-view>
- </div>
- </template>
在这个例子中,<router-view>
标签承载路由,并在当前路由地址对应的组件中动态渲染内容。当用户点击链接切换路由时,<router-view>
标签会自动更新并渲染新的组件。
需要注意的是,一个 Vue 应用只能有一个根组件,因此 <router-view>
标签通常是在根组件中使用。在其他组件中,可以通过 name
属性来指定具名视图的名称,从而在同一个组件中承载多个视图。
- <template>
- <div>
- <router-view></router-view>
- <router-view name="sidebar"></router-view>
- </div>
- </template>
在这个例子中,根组件中有两个 <router-view>
标签,一个用于承载默认视图,另一个用于承载名为 sidebar
的具名视图。在路由配置中,可以通过 components
属性来指定多个组件作为具名视图的内容。
- const router = new VueRouter({
- routes: [
- {
- path: '/',
- components: {
- default: Home,
- sidebar: Sidebar
- }
- }
- ]
- })
在这个例子中,路由地址为 /
的路由将同时渲染 Home
组件和 Sidebar
组件。其中,Home
组件将被渲染到默认视图中,Sidebar
组件将被渲染到名为 sidebar
的具名视图中。
- 集成路由实例
将路由实例集成到Vue应用程序中。这可以在应用程序的根组件中完成。
例如,以下代码将路由实例集成到根组件中:
- <template>
- <div id="app">
- <router-view></router-view>
- </div>
- </template>
- <script>
- import { createApp } from 'vue';
- import router from './router';
- import App from './App.vue';
- const app = createApp(App);
- app.use(router);
- app.mount('#app');
- </script>
在这个例子中,我们使用createApp
函数创建一个Vue应用程序实例,并使用use
方法将路由实例集成到应用程序中。我们还在模板中使用了router-view
组件来渲染当前路由所匹配的组件。
- 创建路由链接(跳转路由)
在 Vue.js 3.x 中,跳转路由的方法和 Vue.js 2.x 略有不同。以下是几种常见的跳转路由的方法:
- 使用
<router-link>
标签
在模板中使用 <router-link>
标签可以生成一个路由链接,并且当用户点击该链接时,自动跳转到相应的路由。例如:
- <router-link to="/about">Go to About</router-link>
在这个例子中,使用 <router-link>
标签生成了一个链接,点击该链接将跳转到 /about
路由。
例如app.vue代码显示如何使用<router-link>
组件创建链接:
- <template>
- <div>
- <router-link to="/">Home</router-link>
- <router-link to="/about">About</router-link>
- </div>
- </template>
在这个例子中,我们使用<router-link>
组件创建两个链接:一个指向路由'/'
,另一个指向路由'/about'
。
这是一个简单的Vue3中基本路由配置的示例。可以通过定义更多的路由规则和使用更多的Vue Router功能来扩展它。
- 使用
$router
对象
在组件中,可以通过 $router
对象访问当前应用的路由实例,并使用其提供的方法跳转到其他路由。例如:
- export default {
- methods: {
- goToAbout() {
- this.$router.push('/about')
- }
- }
- }
在这个例子中,使用 $router.push
方法跳转到 /about
路由。
- 使用
useRouter
方法
在 Vue.js 3.x 中,可以使用 useRouter
方法获取路由实例,并使用其提供的方法跳转到其他路由。
useRouter
是 Vue Router 4.x 中的一个新特性,用于在组件中访问路由实例。在 Vue Router 4.x 中,可以使用 createRouter
方法创建路由实例,并通过 provide/inject
或 app.config.globalProperties
将其注入到 Vue 实例中。然后,在组件中,可以使用 useRouter
方法访问注入的路由实例。
useRouter
方法是一个 Vue 3.x 中的 Composition API 方法,需要使用 import { useRouter } from 'vue-router'
引入。例如:
- <template>
- <div>
- <h1>Home</h1>
- <button @click="handleClick">Go to About</button>
- </div>
- </template>
- <script>
- import { defineComponent, useRouter } from 'vue'
- export default defineComponent({
- setup() {
- const router = useRouter()
- const handleClick = () => {
//push一个url地址- router.push('/about')
//push一个对象
- //router.push(name:'about')
- } return { handleClick } } }) </script>
在这个示例中,使用了 <template>
标签包裹了模板,其中包括一个标题和一个按钮。当按钮被点击时,调用 handleClick
方法,该方法使用 useRouter
方法获取了当前组件所在的路由实例,然后调用 push
方法跳转到路由 /about
。
需要注意的是,这个示例中使用了 Vue.js 3.x 的 Composition API,因此需要使用 import { defineComponent, useRouter } from 'vue'
引入组件和路由实例,并使用 defineComponent
定义组件。
特别注意:
push可以换成replace,但是意义不同。
push
方法用于在路由堆栈中添加新路由记录,而 replace
方法用于替换当前路由记录,因此可以使用 replace
方法进行路由跳转,例如:
- <template>
- <button @click="handleClick">Go to About</button>
- </template>
- <script>
- import { defineComponent, useRouter } from 'vue'
- export default defineComponent({
- setup() {
- const router = useRouter()
- const handleClick = () => {
- router.replace('/about')
- }
- return {
- handleClick
- }
- }
- })
- </script>
需要注意的是,使用 replace
方法进行路由跳转会替换当前路由记录,因此用户无法通过浏览器的后退按钮返回到上一个路由。如果需要保留当前路由记录并添加新的路由记录,应该使用 push
方法。
vue3中的其他跳转,例如:后退、前进
在 Vue.js 3.x 中,可以使用路由实例提供的 back
和 forward
方法实现后退和前进的功能。具体来说,back
方法将用户导航到前一个历史记录条目,而 forward
方法将用户导航到下一个历史记录条目。例如:
- // 使用 $router 对象
- export default {
- methods: {
- goBack() {
- this.$router.back()
- },
- goForward() {
- this.$router.forward()
- }
- }
- }
- // 使用 useRouter 方法
- import { defineComponent, useRouter } from 'vue'
- export default defineComponent({
- setup() {
- const router = useRouter()
- const goBack = () => {
- router.back()
- }
- const goForward = () => {
- router.forward()
- }
- return {
- goBack,
- goForward
- }
- }
- })
需要注意的是,使用 back
和 forward
方法进行导航时,需要确保用户在浏览器中已经浏览了足够多的历史记录,否则这些方法可能会无法正常工作。另外,这些方法也可能会因为浏览器的不同而表现不同。
前进后退使用go实现
在 Vue.js 3.x 中,也可以使用路由实例提供的 go
方法实现前进和后退的功能。该方法接受一个整数参数 n
,表示前进或后退的步数。当 n
为正数时,代表前进,而当 n
为负数时,代表后退。例如:
- // 使用 $router 对象
- export default {
- methods: {
- goBack() {
- this.$router.go(-1)
- },
- goForward() {
- this.$router.go(1)
- }
- }
- }
- // 使用 useRouter 方法
- import { defineComponent, useRouter } from 'vue'
- export default defineComponent({
- setup() {
- const router = useRouter()
- const goBack = () => {
- router.go(-1)
- }
- const goForward = () => {
- router.go(1)
- }
- return {
- goBack,
- goForward
- }
- }
- })
需要注意的是,使用 go
方法进行导航时,需要确保当前路由在浏览器的历史记录中已经存在足够多的条目,否则这些方法可能会无法正常工作。同时,这些方法也可能会因为浏览器的不同而表现不同。
vue全家桶进阶之路34:Vue3 路由基本配置的更多相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- 一个简单的假vue全家桶(vue+vue-router+require)
首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...
随机推荐
- 【LeetCode回溯算法#06】复原IP地址详解(练习如何处理边界条件,判断IP合法性)
复原IP地址 力扣题目链接(opens new window) 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 有效的 IP 地址 正好由四个整数(每个整数位于 0 到 255 ...
- Python学习笔记--文件的相关操作
文件的读取操作 读操作 实现: read()--读完 read(10)--读取10个字节 readline()--将所有行并到一行输出 readlines()--一次读取一行 文件的关闭: 实现: 上 ...
- Redis6.0.9集群搭建
前提条件: Redis版本:6.0.9(因为5.0之前创建用的是redis-trib,还需要ruby,ruby-gem) 安装环境: Centos7 1. 准备配置文件 一个是通用文件:redis-c ...
- [Python]语音识别媒体中的音频到文本
@ 目录 准备工作 视频转音频 识别音频到文本 音频直接转换文本 准备工作 安装python3环境 申请一个可用的语音转换API,此篇以Microsoft Azure Speech为例 在Micros ...
- Kafka 集群调优
更多内容,前往 IT-BLOG 单个 kafka服务器足以满足本地开发或 POC要求,使用集群的最大好处是可以跨服务器进行负载均衡,再则就是可以使用复制功能来避免因单点故障造成的数据丢失.在维护 Ka ...
- ACM-NEFU15届校赛-大二组
A.小林找工作 #include<bits/stdc++.h> using namespace std; const int MAXN=1e5+10; int p[MAXN]; int m ...
- [CTF学习笔记]net-pack(WinShark)
题目:shark on wire 1 Description We found this packet capture. Recover the flag. 思路 这里懂得了winshark的一些基本 ...
- 万字详解 | Java 流式编程
概述 Stream API 是 Java 中引入的一种新的数据处理方法.它提供了一种高效且易于使用的方法来处理数据集合.Stream API 支持函数式编程,可以让我们以简洁.优雅的方式进行数据操作, ...
- [Java EE]小结:生成全局唯一编号的思路
并发是一个让人很头疼的问题,通常会在服务端或数据库端做处理,保证在并发下数据的准确性. 为此,简要讨论一下,如何通过解决全局生成唯一编号的并发问题. 1 MySQL数据库的锁 1-0 锁的分类 按锁定 ...
- 生成器、迭代器、高级函数、map、reduce和filter
1.创建生成器(generation)的两种方法: 第一种就是通过将列表生成式的{}改为() 第二种就是函数中包含yield关键字的函数 2.迭代器是指可以不断返回下一个值的对象,我们可以导入from ...