vue-router命名路由

最新推荐文章于 2024-05-15 17:30:55 发布
最新推荐文章于 2024-05-15 17:30:55 发布
阅读量205 收藏
点赞数
文章标签： vue-router命名路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixiaoyan_star/article/details/89372736
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			// 声明组件
			var Fe={
				template:`
				 <div>我是前端</div>
				`
			}
			var Be={
				template:`
				<div>我是后端</div>
				`
			}
			<!-- //创建路由对象 -->
			var router=new VueRouter({
			  routes:[
				{path:"/frontEnd",
				 component:Fe,
				 <!-- 命名路由 -->
				 name:"frontEnd"
				},
				{path:"/backEnd",
				 component:Be,
				  <!-- 命名路由 -->
				 name:"backEnd"
				}
			   ]
			})
			var App={
				template:`
				<div>
					<!-- router被渲染成a元素，to渲染成href属性 -->
					<router-link :to="{name:'frontEnd'}">前端</router-link>
					<router-link :to="{name:'backEnd'}">后端</router-link>
					<!-- //路由的试图 -->
					<router-view></router-view>
				</div>
				`
			}
			//router挂载到实例上
			new Vue({
				el:"#app",
				router,
				template:`
				<App/>
				`,
				components:{
					App
				}
			})
		</script>
	</body>
</html>
lixiaoyan_star
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router系列之命名路由
老__L的博客
12-11 1155
命名路由
Vue单页面应用
weixin_44434230的博客
11-06 1277
** 1. SPA是什么 ** 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来...
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
最新发布
山花的博客
05-15 1231
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
[vue-router] Duplicate named routes definition: { name: "home", path: "/home" }
weixin_34106122的博客
11-20 1万+
背景：vue 项目，路由为 / ，和 /home ，挂载的组件都是同一个，就会在控制台报警告代码如下图：解决方法：{ path: '/', redirect: { name: 'home' } }, { path: '/home', name: 'home', component: home ...
vue 路由警告 Duplicate named routes definition
暖洋洋的博客
07-05 463
看了一些记录，发现无非2种情况，一种是静态路由改router/index.js中重复的name就行，另一种是动态路由，这个可能在数据库中sys_menu(具体项目具体表)的路由设置名称重复。路由地址的命名重复了，这个改下重复命名，问题自然就没有了。
警告[vue-router] Duplicate named routes definition解决方法
m0_57809042的博客
04-09 2176
导航全局前置守卫中：发现是addRoute()导致的，所以在添加路由之前要重置路由。出现警告：退出登录再登录后 控制台路由命命名重复警告问题。重置之后，黄色警告就没有了。
详解vue-router 命名路由和命名视图
08-27
Vue-Router 命名路由和命名视图详解 Vue-Router 是一个流行的前端路由库，它提供了许多强大的功能来帮助我们管理应用程序的路由。其中，命名路由和命名视图是两个非常重要的概念，本文将详细介绍这两个概念的实现和...
uniapp中的一个完全相似Vue-router的路由插件
01-20
【uni-app中的路由管理：uni-simple-router】 uni-app 是一个基于 Vue.js 的多端开发...在实际开发中，还可以利用 uni-simple-router 提供的其他功能，如动态路由、嵌套路由、命名视图等，进一步优化应用的路由管理。
vue-router命名路由和编程式路由传参讲解
01-19
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。 重点代码： 效果： 若有不足请多多指教！希望给您带来帮助！ 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习...
讲解vue-router之命名路由和命名视图
12-01
前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。 1.首先来说说什么是命名路由？ ① 官方文档的解释...
第五，vue-router命名路由和命名视图（以及学完vue-router总结）
li__po
05-28 2967
前面把动态路由、嵌套路由等弄完了，这里搞完命名路由和命名视图，vue-router的基本使用方法就算是完篇了。vue-router命名路由①命名路由就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：&lt;router-link :to="{ name: 'user...
Vue Router基础使用(命名路由，命名视图，路由传参)
阳光下的冷静的博客
06-19 5445
命名路由 命名路由，顾名思义，就是给生成的路由URL通过一个名称来标识。因此在 Vue Router 中，我们可以在创建Router 实例的时候，通过在routes配置中给某个路由设置名称，从而方便的调用路由。 const router = new VueRouter({ routes: [ { path: '/form', name: 'form', ...
vue路由之命名路由
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-22 1885
一、通过:to="{name:'other'}"的命名。   1、添加 :to="{name:'other'}" &lt;router-link to="/home" tag="span"&gt;首页&lt;/router-link&gt; &lt;router-link to='/about' tag="span"&gt;关于&lt;/rout
前端Vue开发规范
ws_10051411的博客
05-09 2071
文章目录@[toc]前端Vue开发规范一、开发工具及插件二、命名规范2.1 项目文件命名2.1.1 路由命名2.1.2 路由文件名及子组件命名2.1.3 公共组件命名2.1.4 图像文件名/CSS 文件命名2.2 代码参数命名2.2.1 变量2.2.2 常量2.2.3 方法2.2.4 子组件内 $emit 事件二、日志规范三、注释规范3.1 HTML 文件注释3.1.1 单行注释3.1.2 模块注释3.1.3 嵌套模块注释3.3 JavaScript 文件注释3.3.1 单行注释3.3.2 多行注释3.3.
vue项目中控制台报出[vue-router] Duplicate named routes definition: { name: “settings“, path: “/settings/“ }
大牛的博客
08-31 720
问题 退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）； 原因 路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。 需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加 解决 // 在router/index.js文件中配置一个重置路由的方法 // 重置路由 export function resetRouter() { const newRoute.
路由重复：Duplicate named routes definition: { name: “settings“, path: “/settings/“ }
法外狂徒张三
08-30 834
遇见的问题 解决方法 代码： // 重置路由 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // 重新设置路由的可匹配路径 } 然后我们调用这个方法 import { resetRouter } from '@/router' // 退出的action操作 logout(context) { // 3. 重置路由 resetRouter
vue命名路由
Nikki_u的博客
03-27 533
场景1：重定向 App.vue <router-link to="/one"></router-link> <router-link to="/two"></router-link> <router-link :to="{name:'one'}"></router-link> <router-link :to="{name:'two'}"></router-link> main.js import .
Vue最全项目命名规范
热门推荐
u011269322的博客
09-16 1万+
Vue最全项目规范一、命名规范1.1 项目文件命名1.1.1 项目名1.1.2 目录名1.1.3 图像文件名1.1.4 HTML 文件名1.1.5 CSS 文件名1.1.6 JavaScript 文件名 一、命名规范 市面上常用的命名规范： camelCase （小驼峰式命名法–首字母小写） PascalCase （大驼峰式命名法–首字母大写） kebab-case（短横线连接式） Snake（下划线连接式） 1.1 项目文件命名 1.1.1 项目名 全部采用小写方式，以短横线分隔。例：my-proje
vue3+router 命名路由-编程式导航
qq_52099965的博客
10-23 530
vue3+router 命名路由-编程式导航
vue2 vue-router 路由传参
07-28
3. 使用命名路由传参：定义命名路由时可以指定参数，然后在跳转时传递参数。例如，定义一个带有命名路由参数的路由： ```javascript { path: '/user', name: 'user', component: User } ``` 然后，在跳转时可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值