手动配置vue-router路由

最新推荐文章于 2024-04-19 16:38:44 发布
最新推荐文章于 2024-04-19 16:38:44 发布
阅读量830 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46054543/article/details/114892200
版权
本文介绍了手动配置Vue-router的步骤，包括创建router文件夹、生成index.js、安装插件、建立路由对象、在main.js中导入以及在App.vue中添加router-view来展示组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先终端输入创建路由指令：
在这里插入图片描述
创建router文件夹，并在该文件夹中创建index.js文件
在这里插入图片描述
安装插件 → 创建路由对象 → 导出router
在这里插入图片描述
在main.js中导入router
在这里插入图片描述
还需要在App.vue里面添加router-view占位，否则组件将无法显示
在这里插入图片描述
然后还需要在index.js中配置映射关系
在这里插入图片描述

最低0.47元/天 解锁文章
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
王二红
11-30 4979
vue3路由官方文档，vue3路由文档，vue-router4官方文档，使用Vite构建Vue3项目,对路由VueRouter，Vue3中VueRouter4路由的配置，vue3-vueRouterv4.x，vue3中vue-router4基本使用(路由基本配置)，Vue3-Router@4.x使用，vue-router4.x教程，Vue3中基于vue-router4的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3)，10分钟快速上手VueR
Vue.js 中的 `useRouter` 和 `useRoute` 的使用详解
AvskBug的博客
10-04 421
在 Vue.js 中，useRouter和useRoute是非常有用的钩子函数，用于处理路由导航和获取当前路由信息。通过使用useRouter，我们可以方便地进行路由导航操作，而使用useRoute则可以获取当前路由的参数和其他信息。使用示例代码中的useRouter和useRoute，你可以在 Vue.js 应用程序中更好地处理和管理路由相关的逻辑。希望本文对你理解 Vue.js 中useRouter和useRoute的用法有所帮助！
手动 vue-router 的安装和配置
weixin_52012683的博客
11-19 626
在src 源代码 目录下,新建router/index.js 路由模块，并初始化如下的代码；// 2.调用 Vue.use() 西数，把 VueRouter 安装为 Vue 的插件。在模块化 导入的时候，如果只给了文件路径，那么会自动导入 index.js的文件；检查 package.json 有vue-router 包；// 1.导入 Vue 和 VueRouter 的包。// 4.向外共享路由的实例对象。安装vue-router 包；// 3.创建路由的实例对象。导入并挂载路由模块；
“模块 \“\“../../node_modules/vue-router/types\“\“ 没有导出的成员 \“RouteRecordRaw\“。你是想改用 \“import RouteRecor
qq_39750019的博客
09-15 2545
问题描述：“模块 “”…/…/node_modules/vue-router/types”" 没有导出的成员 “RouteRecordRaw”。你是想改用 "import RouteRecor 检查配置后发现，依赖中确实安装了vue-router 3.x 的版本 然后卸载vue-router npm uninstall vue-router 安装 vue-router 4.x的版本 npm install vue-router@next -S 然后运行npm run dev 检查修改 跑起来了
Vue + Ts 模块 ““vue-router““ 没有导出的成员 “createRouter“
杨勇博客之家
07-14 6843
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为优快云连接，目的为方便大家一览博客目录！内...
Vite2.0+Vue3.0+TypeScript学习
wangchuan_long的博客
11-10 606
有空再来写，嘤嘤嘤
模块 ““vuex““ 没有导出的成员 “createStore“。你是想改用 “import createStore from “vuex““ 吗
Zero
11-30 3248
我的store/index.ts import { createStore } from "vuex"; interface State { userName: string; } export default createStore({ state: { userName: "小米", }, }); 我的main.ts import { createApp } from "vue"; import App from "./App.vue"; import "./index
基于vue-router 多级路由redirect 重定向的问题
10-18
在 vue-router 中配置多级路由，需要在 routes 配置数组中嵌套子路由。一级路由直接配置在数组中，而二级及以下的路由则配置在一级路由对象的 children 属性中。举个例子： ```javascript const routes = [ { ...
uniapp中的一个完全相似Vue-router的路由插件
01-20
若想避免手动配置 `modules` 文件夹下的路由，可以使用 `uni-read-pages` 工具自动化处理。安装该工具后，在 `vue.config.js` 中配置并调用 `uni-read-pages`，根据项目中的页面结构自动生成路由表。 通过以上步骤...
Vue-Router路由详解------路由的使用和模式
weixin_53027472的博客
10-10 685
vue-router的基本使用和两种路由模式
Vue.js 3.2 中 UseRouter 和 UseRoute 的用法详解
Jack, what else can you do besides holding your little darling?
04-03 2807
Vue.js 是一款流行的前端框架，由于其易用性和灵活性，在开发中得到了广泛的应用。而在 Vue.js 3.2 中，新增了许多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由开发更加方便。const $router = useRouter() // 这是路由跳转的const $route = useRoute() // 用于接收路由参数的。
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
vue2 route包含的信息和router使用的详细介绍 vue3 useRouter和useRoute 使用以及三种传参方式
青山不改，绿水长流。
09-26 9087
传递和接收方式不同外显式query会很明显的跟在新的url上，而隐式params不会隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage，而query不会隐式params比显式query相对而言更安全，不会将参数直接暴露给用户。
模块““react-router-dom“”没有导出的成员“useHistory”
Youxingfang的博客
07-04 3275
useNavigate 是一个 React Router v6 中的新 Hook，用于在 React 组件中进行路由的导航。这个函数可以接受一个字符串参数，表示要导航到的路径，还可以接受一个可选的对象参数，表示导航的其他选项，例如替换当前路由、在历史记录中前进或后退等。注：useNavigate 只能在 React Router v6 中使用，如果你的项目中使用的是 React Router v5 或更早的版本，你需要继续使用 useHistory。
模块““vue“”没有导出的成员“ref”。
最新发布
weixin_44891022的博客
04-19 2515
当您遇到“模块“‘vue’”没有导出的成员“ref”的错误提示时，这通常意味着在尝试从vue模块导入ref函数时遇到了问题。
解决：模块 ““element-plus““ 没有导出的成员 “ElMessage“。你是想改用 “import ElMessage from “element-plus““ 吗?
weixin_71403100的博客
07-04 2613
使用vue3+vite+ts+Element Plus开发项目，项目运行时是正常的，但会有错误显示，如下：二、错误内容：模块 ""element-plus"" 没有导出的成员 "ElMessage"。你是想改用 "import ElMessage from "element-plus"" 吗?
vue3中useRouter
m0_62487693的博客
03-07 1485
作用获取路由配置对象。- 获取路由参数~~~vue
vue3项目中使用router
qq_34070719的博客
03-18 3704
vue3项目，新的vue-router中规定的使用useRouter,useRoute只能在setup中使用! 所以现在的问题，不是在组件中使用vue-router，最后查了官方文档得知，如果想用router，直接引用router的实例就可以了 example: import router from '@/router' router.push('/xxx') vue3组件中使用router <script setup> import {useRouter} from 'vue-r.
vue中的useRouter的使用
qq_47902937的博客
07-10 1142
你可以在 Vue 3 中方便地获得 Vue Router 实例，并使用其提供的各种路由功能。请确保在正确的地方调用和使用。是 Vue Router v4 中的一个函数，它用于获取 Vue Router 的实例。函数，以确保获得正确的 Router 实例。
Vue-Router路由练习：搭建简易跨境电商网站
使用Vue-CLI可以避免手动配置各种开发工具和环境，极大提高开发效率。 4. **NPM (Node Package Manager)** npm是Node.js的包管理工具，用于安装、分享、管理和发布Node.js包。在本项目中，通过npm命令可以安装项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值