18.VUE_路由_name的用法

最新推荐文章于 2024-05-02 14:00:48 发布
最新推荐文章于 2024-05-02 14:00:48 发布
阅读量758 收藏 4
点赞数 2
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34400745/article/details/103014343
版权
本文详细介绍了Vue路由中name属性的三种用法：1) 为不同router-view指定渲染组件；2) 通过name传参获取组件name值；3) 在params传参中作为引入参数。理解name属性对于优化Vue应用的路由管理至关重要。
摘要由CSDN通过智能技术生成 
在这里插入代码片

我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？

export default new Router({
   
  mode: 'history',
  routes: [
    {
   
      path: '/',
      name: 'Hello',
      component: Hello
    }, {
   
      path: '/text',
      name: 'text',
      component: text
最低0.47元/天 解锁文章
橘九。
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目分析--index.html+main.js+App.vue关系,前端路由的使用
weixin_46045444的博客
10-11 3407
main.js引入文件 https://www.cnblogs.com/chenleideblog/p/10484554.html https://blog.csdn.net/bujiongdan/article/details/81416100 app.vue是一个根组件，main.js 是一个入口文件，index.html是项目入口 index.html有的时候放在public文件夹下 app.vue里实际上就是定义了一个可以操作的vue模板区域，export default实际上就是把这个根组件暴露出
浅析vue-router中name的用法
weixin_30685029的博客
09-03 122
参考：https://blog.csdn.net/weixin_42470791/article/details/82944838 转载于:https://www.cnblogs.com/wangtong111/p/11454501.html
vue的路由使用
weixin_43689176的博客
04-01 633
第一 （安装路由）：npm i vue-router 第二（配置路由）： 1.在src目录下创建router文件夹，在该文件夹下创建index.js 2.在该js文件下配置路由： import VueRouter from 'vue-router'//引入VueRouter import About from '组件路径' //引入组件，About为引用组件名 import Home from '组件路径' import Children1 from '组件路径' //创建rout...
说说Vue-Router和Vue组件中的name属性的使用区别
青春木鱼的博客
12-10 3353
Vue和Vue-Router中的name没有直接联系，是两个不同的概念！
Vue路由的一些知识点
zbwroom的博客
03-23 3477
总结几个有关路由的知识点 $router和$route的关系$route为当前router跳转对象里面可以获取name、path、query、params等$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法等<router-link>中的to 和 :to 的区别to是指直接跳转页面 <router-link to="aa>go&...
路由的name和namespace(命名空间)（个人记录）
nova1318的博客
07-25 320
（个人记录）
解决vue路由name同名,路由重复的问题
10-15
总之，解决Vue路由name同名和路由重复的问题，需要开发者在设计路由配置时遵循命名唯一性的原则，并在遇到路由跳转失败时仔细检查路由配置的正确性。通过不断的实践和调试，可以总结出一套适用于自己项目的路由使用...
Vue经典面试题_227题(部分题没答案).pdf_前端面试题
09-01
2. Vue-router：Vue 官方推荐使用的路由框架。 3. Vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护 Vue 组件间共用的一些变量和方法。 4. Axios（Fetch、Ajax）：用于发起 GET、POST 等 HTTP 请求，基于 ...
vue项目中,main.js,App.vue,index.html的调用方法
10-17
2. 创建VueRouter实例并定义路由规则。 3. 创建Vue根实例，将根元素挂载到index.html中的指定元素上（通常是id为app的div）。 4. 将路由实例注册到Vue根实例中，使得路由相关的功能可用。 5. 可能还会进行一些全局...
vue命名路由（name的使用）
zyy_wx的博客
09-26 962
vue命名路由（name的使用）
Vue的路由params与name（路径命名）、props配置的搭配
weixin_47957908的博客
11-01 1632
功能：通过params传参数，提高路由组件的复用性
vue-router的routes中name属性作用详解
m0_60237095的博客
08-16 6827
我们常用vue.js和vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性（如下面代码），通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Hello', component: Hello ...
vue2进阶篇：vue-router之命名路由
刘大猫
07-09 1786
vue2进阶篇：vue-router之命名路由
vue-router中name的用法
热门推荐
Pima
02-22 1万+
我们常用vue中的vue-router来创建单页应用，vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性，通常我们不定义这个属性发现也没有任何问题，那么这个name到底有什么用呢？ export default new Router({ routes: [ { path: '/', name: 'HelloWorld...
Vue Router 命名路由
最新发布
qq_40930841的博客
05-02 758
一、为什么要使用命名路由使用路由时，一般会先在routes属性中配置路由匹配规则，然后在页面中使用的to属性跳转到指定目标地址。但这种方式存在一些弊端，例如，当目标地址比较复杂时，不便于记忆；当地址发生变化时，需要同步修改所有使用了该地址的代码，会增加开发的工作量。为此，VueRouter提供了命名路由。二、命名路由的语法2.1使用定义路由匹配规则在定义路由匹配规则时，使用name属性为路由匹配规则定义路由名称，即可实现命名路由。命名路由的name。
vue获取当前路由name
青春不打烊的博客
06-29 1417
F5刷新浏览器，重新赋值当前路由name。 怎么监听浏览器刷新？ 不要被浏览器迷惑，vue的生命周期钩子，刷新浏览器Created与mounted是重新跑的。 只需要在mounted中加上 mounted() { this.routeName= this.$route.name }, 就可以了。 ...
vue-router命名路由
木雷双雄7
10-19 4490
/Home是在Router的全局配置中配置的path值。 这种显示的引用路径定义的URL一旦变更，所有引用的地方都需要改，其工作量可想而知。 但是vue-router提供了一种隐式的引用路径，即命名路由，通过路由的名称取代URL的直接引用。 因此需要给Router的全局配置进行重构： router/index.js import Vue from 'vue' import Router
vue路由中name 的作用
weixin_43627806的博客
03-03 765
可以使用nam进行路由跳转 如果不加name keep-alive 可能会产生一些未知的错误
VUE实现路由自动生成，使用require.context根据views文件夹下（多级文件夹）所有.vue文件路径实现路由自动匹配生成， Login.vue和Home.vue固定在views下作为一级路由，其他和Login.vue同一目录下的vue文件也是一级路由， 其他文件夹下的vue文件以index.vue作为出口， 且文件夹下的index.vue的均在home.vue的children下， 其他文件夹下的除index.vue文件的路由均在index.vue的children下
06-09
这是一个非常不错的自动化路由生成的方法，使用 `require.context` 可以快速地遍历 views 文件夹下的所有 .vue 文件。下面是一个示例代码： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 生成路由配置 function generateRoutes(routeContext) { const routes = [] // 遍历所有 .vue 文件 routeContext.keys().forEach(key => { // 获取文件相对路径，如 './User.vue' const routePath = key.replace(/^\.\/(.*)\.\w+$/, '$1') // 根据文件路径生成路由配置 const routeConfig = { path: `/${routePath}`, name: routePath, component: () => import(`@/views/${routePath}.vue`) } // 判断是否是一级路由 if (routePath === 'Login' || routePath === 'Home') { routes.push(routeConfig) } else { const [parentPath, childPath] = routePath.split('/') let parentRoute = routes.find(route => route.path === `/${parentPath}`) if (!parentRoute) { parentRoute = { path: `/${parentPath}`, component: () => import(`@/views/${parentPath}/index.vue`), children: [] } routes.push(parentRoute) } parentRoute.children.push(routeConfig) } }) return routes } // 使用 require.context 生成路由配置 const routeContext = require.context('@/views', true, /\.vue$/) const routes = generateRoutes(routeContext) // 创建路由实例 const router = new Router({ mode: 'history', routes }) export default router ``` 在上面的代码中，我们首先定义了 `generateRoutes` 函数，它接受一个 `require.context` 对象作为参数，遍历所有 .vue 文件，根据文件路径生成路由配置。根据要求，Login.vue 和 Home.vue 固定在 views 下作为一级路由，其他和 Login.vue 同一目录下的 vue 文件也是一级路由，其他文件夹下的 vue 文件以 index.vue 作为出口，且文件夹下的 index.vue 均在 Home.vue 的 children 下，其他文件夹下的除 index.vue 文件的路由均在 index.vue 的 children 下。 然后，我们使用 `require.context` 生成路由配置，并调用 `generateRoutes` 函数生成路由配置数组。最后，我们使用 `new Router` 创建路由实例，并将路由配置数组作为参数传入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值