vue-router使用笔记

最新推荐文章于 2023-12-28 13:40:36 发布
最新推荐文章于 2023-12-28 13:40:36 发布
阅读量126 收藏
点赞数
分类专栏： vue路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44670001/article/details/112178293
版权

路由用法 案例笔记

  1. 三级路由
  2. 路由守卫中使用router进行跳转
    …

1.三级路由

const routes = [
	// 一级路由
	{
      										
		path: '',
		redirect: 'wrapper',						<<==进入页面后就重定向到wrapper
	},
	{
   
		path: '/wrapper',							
		name: 'Wrapper',
		component: () => import('@/views/wrapper.vue'),  <<==提供承载二级路由的模板【也就是父路由】
		redirect: 'wrapper/home',						 <<==在父路由中重定向到二级路由
		//二级路由
		children: [
			{
   
				path: 'home',
				name: 'Home'
最低0.47元/天 解锁文章
昵称怎么就那么多
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router 三级路由
qq_40420929的博客
12-10 1万+
1.home.vue <template> <div class="nav"> 一级路由首页 <router-link class="nav-item" to="/TestEvaluation">测试评估</router-link> <router-link class="nav-item" to="/ParameterManage">参数管理</router-link> <router-lin
vue router 路由 1级 2级 3级以及3级路由跳转改变以及路由下的动
csstmg的博客
07-27 906
{ path: '/example', component: Layout, redirect: '/example/staffhmc', name: 'Example', meta: { title: '员工管理', icon: 'yuangbl', ids: [6, 15, 20, 132] }, // 1 children: [ { path: 'staffhmc', name: 'Staffhmc', component: () .
vue动态路由,三级及以上路由,地址跳转,但是页面不显示
最新发布
yuzheh521的博客
12-28 2313
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,这种循环希望大家使用递归。
vue-router 3级路由
酷酷的旭
07-08 8671
import Layout from '@/layout' const ptrECard = { path: '/ptrECard', component: Layout, redirect: '/ptrECard', name: 'ptrECard', meta: { title: 'ptrECard', icon: 'logistics' }, c...
router 二级 三级嵌套及选中高亮
sinat_41541913的博客
04-12 745
1.main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。 路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。 三级路由也挂在二级路由对象中的children数组里面。 redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。 import Vue f
Vue-router学习笔记
01-27
Vue-router是Vue.js框架的重要组成部分，它作为官方的路由管理器，使得构建单页面应用程序变得更加简单。...通过深入理解和熟练使用Vue-router，开发者能够更好地掌控单页面应用的页面流转和数据交互。
Vue-router入门教程笔记
06-27
本教程笔记将深入浅出地讲解Vue-router的基本概念、安装、配置以及实际应用。 1. **基本概念** - 路由（Route）: 路由是URL模式与组件之间的一种映射，当我们改变URL时，Vue-router会根据预定义的路由规则加载相应...
Vue学习笔记进阶篇之vue-router安装及使用方法
08-29
import VueRouter from 'vue-router' // 注册 Vue.use(VueRouter) ``` 然后，我们需要实例化 Vue Router： ```javascript const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component...
Vue-Router基础学习笔记(小结)
12-10
2. **引入和注册**：在Vue应用中，首先需要导入Vue和VueRouter，然后通过`Vue.use(VueRouter)`来全局注册Vue-Router。 3. **链接跳转**：在模板中，我们可以使用`<router-link>`组件创建可点击的导航链接，例如`...
vue三级路由
06-25
vue如何使用二级路由和三级路由,以及路由的引用,路由的抽离
Vue-router 路由详解 多级路由
群峰之巅的博客
03-14 1万+
今天我来分享一下vue路由方面的心得体会。 文章源码位置https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base 使用的脚手架为Vue3.0，IDE为VSCode 首先引入vue路由 cnpm install vue-router --save-dev 然后我们在src目录下建立文件夹router,并...
vue-router 多级路由redirect 重定向的问题
热门推荐
versionli的博客
06-27 8万+
在做多级路由的时候遇到很多问题，虽然不难，但是如果没有经验，往往要花一整天时间才能解决（可能我笨），况且网上资料也很少。项目需要是这样的： 登录页面跳到后台页面重定向，登录页是一级路由对应页面登录后：同时重定向二级和三级页面，这样登录就会重定向了，此时url但又有一个问题：当再次点击底部“堂食”的时候，url变成这样，并且三级页面没有出来解决办法是：在这个“堂食”按键 添加一个方法记住，也只...
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
itclanCoder
09-15 2516
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度然后在配置三级路由以上的时候,往往却没那么容易,会出现...
Vue实现三级路由
Queen-Shir的博客
09-03 2438
https://segmentfault.com/a/1190000018127192
[已解决！]vue-router] Named Route ‘jinengHome‘ has a default child route. When navigating to this named.
qq_43055855的博客
10-21 2530
项目场景： 前几天的项目跑起来还好好的，今天开启Vue-cli 脚手架项目发现页面显示空白。就很苦恼。 问题描述： 找控制台出现以下提示： @Override [vue-router] Named Route 'jinengHome' has a default child route. When navigating to this named route (:to="{name: 'jinengHome'"), the default child route will not be rende
Vue-router嵌套路由的使用
a641832648的博客
03-21 7150
路由使用的时候需要设置路由的路径： ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top }, { path: '/new', component: New }, { path: '/', redirect: '/top' } ] }) 然后设置路由要渲染的标签：
vue 使用keep-alive 三级以上的路由无法缓存解决方案
zhangjie9852的博客
08-19 4374
include ,包含页面组件name的这些组件页面，会被缓存起来 exclude 除了这些name以外的页面组件，会被缓存起来 还有第3种，如下这样写(即没有include或者exclude属性，表示所有的路由组件都会被缓存起来！！) <keep-alive> <router-view :key="key" /> </keep-alive> computed: { key() { return this.$route.path } } 注意 incl...
vue-router嵌套路由详解
木雷双雄7
10-18 4万+
嵌套路由顾名思义就是路由的多层嵌套。 结合vue-router仿天猫底部导航栏，给组件Me添加嵌套路由，也叫子路由。 总共添加两个子路由，分别命名Collection.vue（我的收藏）和Trace.vue（我的足迹） 1、重构router/index.js的路由配置，需要使用children数组来定义子路由，具体如下： import Vue from 'vue' import Rou
Vue.js系列之vue-router(上)（3）
AndyLizh的专栏
02-24 1533
说明： 我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3  如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。  1.Vue.j
尚硅谷vuerouter笔记
09-01
根据引用，尚硅谷的Vue Router笔记中可能是关于组件的自定义事件总结的内容。这份笔记可能总结了关于组件自定义事件的使用方法和案例，而在1.10之后的内容中可能没有详细讲解，只记录了使用方法和案例。如果您需要更...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值