Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

最新推荐文章于 2024-04-24 09:22:16 发布
VIP文章 最新推荐文章于 2024-04-24 09:22:16 发布
阅读量7.2k 收藏 19
点赞数 2
文章标签： javascript 开发工具 webpack ViewUI
原文链接：http://www.cnblogs.com/qianjinyan/p/10899921.html
版权

今天编写了一下Vue中的路由

先用命令行新建一个空的项目，并且我知道要用路由，就下载了路由的相关依赖

vue init webpack demo5

完毕之后进入所在的项目 cd demo5

之后用vscode打开、引入demo5的文件夹，在vscode自带的命令行中安装依赖和启动

cnpm install

cnpm run dev

之后成功启动在8080端口

 

要想显示导航，限准备一些vue的页面，导航，我这边希望显示在头部

那就在header中添加

先来看一下页面，之后代码同步到github上  https://github.com/JasmineQian/Vue_Sample

 

先说一下跳转的用法

 


 



                

        

        




    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_33804582
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    19
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue二级路由设置方法

				
			

			

				

					12-28
				

			

		

		

			
				
项目当中使用vue的时候一定会用到路由，并且二级路由甚至三集路由的需求都是刚需，当然，多级路由的配置方法和二级的是一样的，简单讲讲二级路由的配置吧。
首先把一级路由的结构准备好：

 <router to=/discover>
  <div click=clickFind(>
   <span class=icon-find></span>
   <p>发现</p>
  </div>
  </router>
  <router to=/todayStudy>
  <div click=clickStudy(>
   

			
		

	



                

              
                



	

		

			

				
					
vue-router二级导航切换路由及高亮显示的实现方法

				
			

			

				

					12-09
				

			

		

		

			
				
这里以网易云音乐作为示例，效果图：

我们先一层一层写导航

先设计第一层

1.设计导航页面样式

第一个导航页面为Discover
Discover.vue：

<!-- -->
<template>
 <div>
 发现
 </div>
</template>
[removed]
export default {
 name: "discover",
 data() {
 return {
 };
 }
};
[removed]
<style scoped>
</style>
第二个导航页面为Mymusic

其余代码一样，注意要把name改为相应路由

name: "mymusic"
2

			
		

	



                


  
              

                


	

		

			

				
					
vue获取上级路由地址

				
			

			

				

					qq_41842461的博客
				

				

					03-21
					
					300
					
				

			

		

		

			
				
【代码】vue获取上级路由地址。

			
		

	





	

		

			

				
					
vue-路由精讲 二级路由和三级路由的作用

				
			

			

				

					10-14
				

			

		

		

			
				
主要介绍了vue-路由精讲 二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



		

			
		



	

		

			

				
					
Vue-router 路由详解 多级路由

				
			

			

				

					嘿嘿
				

				

					05-19
					
					1155
					
				

			

		

		

			
				
今天我来分享一下vue路由方面的心得体会。

文章源码位置https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base

使用的脚手架为Vue3.0，IDE为VSCode

首先引入vue路由

cnpm install vue-router --save-dev

然后我们在src目录下建立文件夹router,并创建文件index.js

项目大致结构如下



然后我们在view文件夹(新建一个)下创建文件 compan.

			
		

	





	

		

			

				
					
elementUI 三级导航页面不跳转

				
			

			

				

					weixin_43876402的博客
				

				

					12-17
					
					643
					
				

			

		

		

			
				
elementUI 后台三级导航不跳转

			
		

	





	

		

			

				
					
vue router 路由 1级 2级 3级以及3级路由跳转改变以及路由下的动

				
			

			

				

					csstmg的博客
				

				

					07-27
					
					875
					
				

			

		

		

			
				
{
  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三级路由跳转

				
			

			

				

					csdn_zy_的博客
				

				

					03-14
					
					6618
					
				

			

		

		

			
				
效果图


代码





			
		

	





	

		

			

				
					
vue3跳转到了二级路由，但页面留在了一级路由的页面

				
			

			

				

					weixin_42591413的博客
				

				

					02-16
					
					575
					
				

			

		

		

			
				
在Vue3中，使用Vue Router进行路由跳转时，需要注意以下几个方面：

确认路由配置：在路由配置中，需要将二级路由配置在一级路由的children中。例如：
const routes = [
  {
    path: '/first-level',
    component: FirstLevelComponent,
    children: [
      {
        pa...

			
		

	





	

		

			

				
					
vue-router 3级路由

				
			

			

				

					酷酷的旭
				

				

					07-08
					
					8649
					
				

			

		

		

			
				
import Layout from '@/layout'

const ptrECard = {
  path: '/ptrECard',
  component: Layout,
  redirect: '/ptrECard',
  name: 'ptrECard',
  meta: {
    title: 'ptrECard',
    icon: 'logistics'
  },
  c...

			
		

	





	

		

			

				
					
解决vue+router路由跳转不起作用的一项原因

				
			

			

				

					11-20
				

			

		

		

			
				
如下所示：  Vue.use(Router) export default new Router({ mode:'history', routes: [  { path: '/', component: Login },  { path: '/login', component: Login }, ...补充知识：vue-router配置后地址栏输入跳转不

			
		

	





	

		

			

				
					
VueJs路由跳转——vue-router的使用详解

				
			

			

				

					10-20
				

			

		

		

			
				
本篇文章主要介绍了VueJs路由跳转——vue-router的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
一个小时学习javaScript

				
			

			

				

					weixin_43064364的博客
				

				

					04-20
					
					920
					
				

			

		

		

			
				
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。

			
		

	





	

		

			

				
					
vue2---修饰符

					
最新发布

				
			

			

				

					weixin_45503872的博客
				

				

					04-24
					
					996
					
				

			

		

		

			
				
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。

			
		

	





	

		

			

				
					
JavaScript 高性能编程 —— Data Access 数据访问

				
			

			

				

					cccloveforever的博客
				

				

					04-20
					
					1512
					
				

			

		

		

			
				
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。

			
		

	





	

		

			

				
					
JEECG表格选中状态怎么去掉

				
			

			

				

					weixin_39031037的博客
				

				

					04-19
					
					579
					
				

			

		

		

			
				
官网代码（在取消选中状态的时候不生效）

			
		

	





	

		

			

				
					
vue 实现级联选择器功能

				
			

			

				

					清音的博客
				

				

					04-22
					
					491
					
				

			

		

		

			
				
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。

			
		

	





	

		

			

				
					
vue中一级路由跳转二级路由得时候 路径一闪而过 无法跳转

				
			

			

				

					05-27
				

			

		

		

			
				
在 Vue 中，一级路由跳转二级路由路径一闪而过无法跳转的情况也可能是路由配置或组件渲染的问题导致的。  首先，与 React 类似，确保你的路由配置正确。在一级路由组件中跳转到二级路由，需要在路由配置文件中设置二...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值