VUE router3 路由搭建

已于 2023-04-12 22:57:27 修改
阅读量901 收藏
点赞数
文章标签： 开发语言 vue.js 前端框架
于 2023-04-12 22:31:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74992501/article/details/130117825
版权

文章目录

一、下载/安装

1.CDN方式

https://unpkg.com/vue-router@3/dist/vue-router.js

        http:// Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@3.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2.NPM方式

        在项目根目录打开命令行（windows键+R打开

最低0.47元/天 解锁文章
HeiziG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue router2.0二级路由的简单使用
08-30
Vue Router 是一个基于 Vue.js 的路由插件，能够帮助开发者快速搭建单页应用程序。今天，我们将详细介绍 Vue Router 2.0 的二级路由的简单使用。 什么是二级路由？ 在 Vue Router 中，二级路由指的是在某个路由...
搭建模仿跨境电商网站vue-router路由跳转
10-11
包含十几个网页，主要就是练习vue-router简单操作，实现基本跳转，node_modules文件比较大，没有在压缩包里，可以在命令行“nmp i”安装一下,自我感觉写的挺好的，哈哈，大神请绕路！
vue3安装路由（router）
m0_68716504的博客
10-30 2146
此时：路由就配置好了，路由的默认跳转就可以了，项目启动之后，就会跳转到第二步骤配置的home页面。vue3需要安装4.0以上版本。vue2最好安装4.0以下版本。安装完成后，可在package.json中查看。1.安装vue-router。
Vue3-路由详解
最新发布
A的博客
05-31 1524
让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：可以简化路由跳转及传参（后面就讲）。参数时，需要提前在规则中占位。的对象写法，必须使用。
Vue3中的路由功能：安装和配置Vue Router、路由的基本用法、动态路由、嵌套路由
网络技术联盟站
07-18 5310
在本文中，我们详细介绍了Vue3中的路由功能。我们学习了如何安装和配置Vue Router，以及路由的基本用法、动态路由、嵌套路由和路由守卫等内容。通过合理地使用Vue Router，我们可以构建复杂的页面结构，实现灵活的路由导航，并在路由切换时执行额外的逻辑。
vue3:router安装与使用
weixin_51785507的博客
08-03 6469
vue3-router路由安装配置使用详解
vue3+ts:安装路由（router）
weixin_45440521的博客
03-03 3731
vue3+ts:安装路由（router）
Vue3---安装路由
牧小七的博客
01-09 687
使用Vue3，进行安装路由。
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...
搭建Vue从Vue-cli到router路由护卫的实现
12-13
首先安装vue-cli mac: sudo npm install -g @vue/cli github: https://github.com/XinYueXiao/vue-routes 1、Vue-cli基础使用 1.1 创建测试项目 vue create vue-routes 1.2 创建成功,启动项目 yarn serve 在 ...
详解Vue.js搭建路由报错 router.map is not a function
10-19
最后，我们使用`VueRouter`实例并传入`routes`数组，然后在Vue实例中注入`router`。 **注意事项：** 1. 在不同的Vue Router版本之间，不仅API有变化，一些概念和使用方式也可能有所不同。比如在Vue Router 2.x中，`...
Vue——vue3路由搭建
qq_43201350的博客
10-08 818
Vue——vue3路由搭建
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
vue3安装路由简单教程：四步完成
肖肖的博客
11-09 1801
vue3安装路由简单教程：四步完成
Vue3配置路由(vue-router)
程序员柒的博客
02-09 1万+
紧接上篇文章，vue3的配置与vue2是有所差别的，本文就讲述了如何配置，如果本文对你有所帮助请三连支持博主。下面案例可供参考。
【VUE3】Router安装及使用
qq_62543337的博客
11-10 1712
导航守卫是在路由跳转时执行的钩子函数，用于控制路由的访问权限、处理路由跳转前后的逻辑等。在 Vue Router 中，对于选项式 API，常用的导航守卫有 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等；其中，path 表示 URL 的路径，component 表示要渲染的组件，name 表示路由名称，meta 表示路由的元数据，props 表示路由 props 数据。在 Vue Router 中，路由通常是由 path 规则和相应的组件定义的。
vue3 vue-router的安装及配置 (一)
wxid_mtnujb6ipc0322的博客
12-04 2418
Vue Router作用：在应用程序中实现优雅的导航和路由管理。
vue3手把手教你手动安装路由
weixin_44442366的博客
07-19 1417
Vue3安装路由
vue3+vite router 多级路由示例
06-01
好的，这里是一个使用Vue 3和Vite搭建的多级路由示例： 首先，我们需要安装Vue Router： ``` npm install vue-router@4.0.0-0 ``` 接下来，我们创建一个router.js文件，在其中定义我们的路由： ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('./views/Home.vue') }, { path: '/about', component: () => import('./views/About.vue') }, { path: '/users', component: () => import('./views/Users.vue'), children: [ { path: '', component: () => import('./views/UsersList.vue') }, { path: ':id', component: () => import('./views/UsersDetail.vue') } ] } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ``` 这里我们定义了三个路由，分别是根路径'/'、'/about'和'/users'。其中，'/users'是一个嵌套路由，包含了'/users'和'/users/:id'两个子路由。 接着，在我们的main.js文件中，我们需要将router引入，并将其挂载到Vue实例上： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 最后，我们需要在App.vue中加入\<router-view>标签，用于渲染路由组件： ```html <template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/users">Users</router-link> </nav> <router-view></router-view> </div> </template> ``` 这样，我们就完成了一个简单的多级路由示例。访问'/users'路径时，将会渲染Users.vue组件，并在其内部渲染UsersList.vue组件；访问'/users/:id'路径时，将会渲染Users.vue组件，并在其内部渲染UsersDetail.vue组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值