在Vue3中,路由的基本配置是通过使用Vue Router库来实现的。以下是Vue3中路由的基本配置步骤:

  1. 安装Vue Router

使用npm或yarn在项目中安装Vue Router:

  1. npm install vue-router
  2. // 或者
  3. yarn add vue-router
  1. 创建路由实例

创建一个路由实例并定义路由规则。路由规则是一个对象数组,其中每个对象都定义了一个路由的路径和组件。

例如,以下代码定义了两个路由规则:

  1. import { createRouter, createWebHistory } from 'vue-router';
  2. import Home from './components/Home.vue';
  3. import About from './components/About.vue';
  4.  
  5. const routes = [
  6. { path: '/', component: Home },
  7. { path: '/about', component: About }
  8. ];
  9.  
  10. const router = createRouter({
  11. history: createWebHistory(),
  12. routes
  13. });
  14.  
  15. export default router;

在这个例子中,我们导入了createRoutercreateWebHistory函数。createRouter函数用于创建路由实例,createWebHistory函数用于指定路由的历史记录模式。我们还定义了两个路由规则:一个路由规则对应路径'/',另一个对应路径'/about'。这些路由规则将路由到HomeAbout组件。

在 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:一个数组,表示该路由的子路由,用于实现嵌套路由。

路由规则可以通过一个对象或者一个数组来定义,例如:

  1. // 定义单个路由规则
  2. const homeRoute = {
  3. path: '/',
  4. name: 'Home',
  5. component: Home
  6. }
  7.  
  8. // 定义多个路由规则
  9. const routes = [
  10. {
  11. path: '/',
  12. name: 'Home',
  13. component: Home //组件名方式加载
  1. }, { path: '/about', name: 'About',
  1.   component: () => import("../views/AboutView.vue"),// 懒加载
  1. meta: { requiresAuth: true } } ]

在 Vue Router 中,可以使用两种不同的 history 模式:hashhistory

  • createWebHashHistory():使用 URL 的 hash(即 URL 中的 #)来模拟一个完整的 URL。这种模式的优点是在不支持 HTML5 History API 的浏览器中也可以正常使用,缺点是 URL 比较丑陋,不利于 SEO。

  • createWebHistory():使用 HTML5 History API 来实现路由,URL 是真实的 URL,不需要 # 符号。这种模式的优点是 URL 更加美观,不会出现 # 符号,缺点是需要浏览器支持 HTML5 History API,如果不支持则会出现兼容性问题。

在创建路由器实例时,需要通过 createWebHashHistory() 或者 createWebHistory() 函数来创建一个 history 对象。例如:

  1. const router = createRouter({
    // 使用 history 模式
  2. history: createWebHistory(),
  3. routes,
  4. });
  1. const router = createRouter({
    // 使用 hash 模式
  2. history: createWebHashHistory(),
  3. routes,
  4. });

在 Vue 中,可以使用 <router-view> 标签来承载路由。<router-view> 标签会根据当前的路由信息动态渲染对应的组件。例如:

  1. <template>
  2. <div>
  3. <router-link to="/">Home</router-link>
  4. <router-link to="/about">About</router-link>
  5. <router-view></router-view>
  6. </div>
  7. </template>

在这个例子中,<router-view> 标签承载路由,并在当前路由地址对应的组件中动态渲染内容。当用户点击链接切换路由时,<router-view> 标签会自动更新并渲染新的组件。

需要注意的是,一个 Vue 应用只能有一个根组件,因此 <router-view> 标签通常是在根组件中使用。在其他组件中,可以通过 name 属性来指定具名视图的名称,从而在同一个组件中承载多个视图。

  1. <template>
  2. <div>
  3. <router-view></router-view>
  4. <router-view name="sidebar"></router-view>
  5. </div>
  6. </template>

在这个例子中,根组件中有两个 <router-view> 标签,一个用于承载默认视图,另一个用于承载名为 sidebar 的具名视图。在路由配置中,可以通过 components 属性来指定多个组件作为具名视图的内容。

  1. const router = new VueRouter({
  2. routes: [
  3. {
  4. path: '/',
  5. components: {
  6. default: Home,
  7. sidebar: Sidebar
  8. }
  9. }
  10. ]
  11. })

在这个例子中,路由地址为 / 的路由将同时渲染 Home 组件和 Sidebar 组件。其中,Home 组件将被渲染到默认视图中,Sidebar 组件将被渲染到名为 sidebar 的具名视图中。

  1. 集成路由实例

将路由实例集成到Vue应用程序中。这可以在应用程序的根组件中完成。

例如,以下代码将路由实例集成到根组件中:

  1. <template>
  2. <div id="app">
  3. <router-view></router-view>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import { createApp } from 'vue';
  9. import router from './router';
  10. import App from './App.vue';
  11.  
  12. const app = createApp(App);
  13.  
  14. app.use(router);
  15.  
  16. app.mount('#app');
  17. </script>

在这个例子中,我们使用createApp函数创建一个Vue应用程序实例,并使用use方法将路由实例集成到应用程序中。我们还在模板中使用了router-view组件来渲染当前路由所匹配的组件。

  1. 创建路由链接(跳转路由)

在 Vue.js 3.x 中,跳转路由的方法和 Vue.js 2.x 略有不同。以下是几种常见的跳转路由的方法:

  • 使用 <router-link> 标签

在模板中使用 <router-link> 标签可以生成一个路由链接,并且当用户点击该链接时,自动跳转到相应的路由。例如:

  1. <router-link to="/about">Go to About</router-link>

在这个例子中,使用 <router-link> 标签生成了一个链接,点击该链接将跳转到 /about 路由。

例如app.vue代码显示如何使用<router-link>组件创建链接:

  1. <template>
  2. <div>
  3. <router-link to="/">Home</router-link>
  4. <router-link to="/about">About</router-link>
  5. </div>
  6. </template>

在这个例子中,我们使用<router-link>组件创建两个链接:一个指向路由'/',另一个指向路由'/about'

这是一个简单的Vue3中基本路由配置的示例。可以通过定义更多的路由规则和使用更多的Vue Router功能来扩展它。

  • 使用 $router 对象

在组件中,可以通过 $router 对象访问当前应用的路由实例,并使用其提供的方法跳转到其他路由。例如:

  1. export default {
  2. methods: {
  3. goToAbout() {
  4. this.$router.push('/about')
  5. }
  6. }
  7. }

在这个例子中,使用 $router.push 方法跳转到 /about 路由。

  • 使用 useRouter 方法

在 Vue.js 3.x 中,可以使用 useRouter 方法获取路由实例,并使用其提供的方法跳转到其他路由。

useRouter 是 Vue Router 4.x 中的一个新特性,用于在组件中访问路由实例。在 Vue Router 4.x 中,可以使用 createRouter 方法创建路由实例,并通过 provide/injectapp.config.globalProperties 将其注入到 Vue 实例中。然后,在组件中,可以使用 useRouter 方法访问注入的路由实例。

useRouter 方法是一个 Vue 3.x 中的 Composition API 方法,需要使用 import { useRouter } from 'vue-router' 引入。例如:

  1. <template>
  2. <div>
  3. <h1>Home</h1>
  4. <button @click="handleClick">Go to About</button>
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. import { defineComponent, useRouter } from 'vue'
  10.  
  11. export default defineComponent({
  12. setup() {
  13. const router = useRouter()
  14.  
  15. const handleClick = () => {
        //push一个url地址
  16. router.push('/about')
        //push一个对象
  1.     //router.push(name:'about')
  1. } 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 方法进行路由跳转,例如:

  1. <template>
  2. <button @click="handleClick">Go to About</button>
  3. </template>
  4.  
  5. <script>
  6. import { defineComponent, useRouter } from 'vue'
  7.  
  8. export default defineComponent({
  9. setup() {
  10. const router = useRouter()
  11.  
  12. const handleClick = () => {
  13. router.replace('/about')
  14. }
  15.  
  16. return {
  17. handleClick
  18. }
  19. }
  20. })
  21. </script>

需要注意的是,使用 replace 方法进行路由跳转会替换当前路由记录,因此用户无法通过浏览器的后退按钮返回到上一个路由。如果需要保留当前路由记录并添加新的路由记录,应该使用 push 方法。

vue3中的其他跳转,例如:后退、前进

在 Vue.js 3.x 中,可以使用路由实例提供的 backforward 方法实现后退和前进的功能。具体来说,back 方法将用户导航到前一个历史记录条目,而 forward 方法将用户导航到下一个历史记录条目。例如:

  1. // 使用 $router 对象
  2. export default {
  3. methods: {
  4. goBack() {
  5. this.$router.back()
  6. },
  7. goForward() {
  8. this.$router.forward()
  9. }
  10. }
  11. }
  12.  
  13. // 使用 useRouter 方法
  14. import { defineComponent, useRouter } from 'vue'
  15.  
  16. export default defineComponent({
  17. setup() {
  18. const router = useRouter()
  19.  
  20. const goBack = () => {
  21. router.back()
  22. }
  23.  
  24. const goForward = () => {
  25. router.forward()
  26. }
  27.  
  28. return {
  29. goBack,
  30. goForward
  31. }
  32. }
  33. })

需要注意的是,使用 backforward 方法进行导航时,需要确保用户在浏览器中已经浏览了足够多的历史记录,否则这些方法可能会无法正常工作。另外,这些方法也可能会因为浏览器的不同而表现不同。

前进后退使用go实现

在 Vue.js 3.x 中,也可以使用路由实例提供的 go 方法实现前进和后退的功能。该方法接受一个整数参数 n,表示前进或后退的步数。当 n 为正数时,代表前进,而当 n 为负数时,代表后退。例如:

  1. // 使用 $router 对象
  2. export default {
  3. methods: {
  4. goBack() {
  5. this.$router.go(-1)
  6. },
  7. goForward() {
  8. this.$router.go(1)
  9. }
  10. }
  11. }
  12.  
  13. // 使用 useRouter 方法
  14. import { defineComponent, useRouter } from 'vue'
  15.  
  16. export default defineComponent({
  17. setup() {
  18. const router = useRouter()
  19.  
  20. const goBack = () => {
  21. router.go(-1)
  22. }
  23.  
  24. const goForward = () => {
  25. router.go(1)
  26. }
  27.  
  28. return {
  29. goBack,
  30. goForward
  31. }
  32. }
  33. })

需要注意的是,使用 go 方法进行导航时,需要确保当前路由在浏览器的历史记录中已经存在足够多的条目,否则这些方法可能会无法正常工作。同时,这些方法也可能会因为浏览器的不同而表现不同。

vue全家桶进阶之路34:Vue3 路由基本配置的更多相关文章

  1. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  2. Vue全家桶高仿小米商城

    大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...

  3. vue证明题一,vue全家桶的构成

    简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...

  4. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  5. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  6. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  7. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  8. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  9. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  10. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

随机推荐

  1. Spring设计模式——代理模式[手写实现JDK动态代理]

    代理模式 代理模式(Proxy Pattern):是指为其他对象提供一种代理,以控制对这个对象的访问. 代理对象在客户端和目标对象之间起到中介作用,代理模式属于结构型设计模式. 使用代理模式主要有两个 ...

  2. sqlmap的基本使用

    sqlmap的基本使用 一.注入 1.查询是否存在注入点 sqlmap -u "http://www.xx.com?id=x" --dbs 检测有哪些数据库 --current-d ...

  3. 万字血书React—走近React

    配置开发环境 脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...

  4. 痞子衡嵌入式:利用i.MXRT1xxx系列ROM集成的DCD功能可轻松配置指定外设

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是利用i.MXRT1xxx系列ROM集成的DCD功能可轻松配置指定外设. 关于 i.MXRT1xxx 系列芯片 BootROM 中集成的 ...

  5. 游戏模拟——Position based dynamics

    目录 Verlet积分 基本积分方法 Verlet 算位置 Verlet 算速度 PBD 基于力的方法解碰撞 过冲问题 基于位置的方法解碰撞 算法流程 求解器借用的思想 关于动量守恒 约束投影 简单约 ...

  6. 利用 kubeadm 创建 kubernetes (k8s) 的高可用集群

    引言: kubeadm提供了两种不同的高可用方案. 堆叠方案:etcd服务和控制平面被部署在同样的节点中,对基础设施的要求较低,对故障的应对能力也较低 堆叠方案 最小三个Master(也称工作平面), ...

  7. 经GitHub将kubernetes镜像推送到阿里云

    背景 在安装kubernetes时会出现无法访问镜像站的情况,通过GitHub将kubernetes镜像推送到阿里云之后,即可使用阿里云地址引用所需镜像,现已同步镜像5000+,当前还在陆续同步.仓库 ...

  8. kubernetes核心实战(八)--- service

    13.service 四层网络负载 创建 [root@k8s-master-node1 ~/yaml/test]# [root@k8s-master-node1 ~/yaml/test]# vim m ...

  9. [Java EE] java.net.SocketException: Connection reset【解决中】

    1 错误描述 6:44:33.112] [DEBUG] [http-nio-9527-exec-3] [HttpClientUtil] http post url:http://bdp-gateway ...

  10. 安全测试前置实践1-白盒&黑盒扫描

    作者:京东物流 陈维 一.引言 G.J.Myers在<软件测试的艺术>中提出:从心理学角度来说,测试是一个为了寻找错误而运行程序的过程. 那么安全测试则是一个寻找系统潜在安全问题的过程,通 ...