vue的路由跳转与路由嵌套

最新推荐文章于 2024-02-09 16:05:37 发布

leleccccc

最新推荐文章于 2024-02-09 16:05:37 发布

阅读量658

点赞数

分类专栏： vue

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue项目中路由的工作原理及应用，包括vue-router的安装、配置与使用，以及路由跳转和嵌套的实现方式，帮助开发者掌握Vue中页面导航的高效技巧。

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

转载：https://blog.youkuaiyun.com/Mr_JavaScript/article/details/80744268

路由的原理是通过改变网址，来实现页面的局部刷新，相比a标签跳转的不同之处在于，路由跳转不需要刷新整个页面。

一、路由跳转

1、安装路由vue-router:

npm install vue-router

2、vue项目引入vue-ruoter：

3、配置路由（页面跳转）：

可以建一个专门用于路由的js文件，里面配置路径。

1）router.js路由配置文件

2）main.js里引入router.js路由文件

4、组件里调用

1）使用router-view标签给vue组件的跳转提供一个容器

2）使用router-link标签实现跳转（它类似于a标签，区别在于router-link跳转不需要刷新页面）

方法一：to里填写的是跳转的路径，即定义路由时的path路径

方法二：to里使用路由名称name跳转

跳转至table组件：

3、实现效果

项目的首页：

点击table后跳转：

（完成）

二、路由嵌套

1、配置嵌套路由


 
   
    
   
   
    
     {
    
   

   
    
   
   
        
     path:
     '/about',      //一级路由
    
   

   
    
   
   
    
         component:About,
    
   

   
    
   
   
    
         children:[          
    
   

   
    
   
   
    
           {                      //二级路由
    
   

   
    
   
   
    
             path:
     '/',            //二级的默认路由（此path指向上一级，即path:
     '/about'）
    
   

   
    
   
   
    
             name:
     'expressLink',        
    
   

   
    
   
   
    
             component:Express      
    
   

   
    
   
   
    
           },
    
   

   
    
   
   
    
           {
    
   

   
    
   
   
            
     path:
     '/about/guide',
    
   

   
    
   
   
    
             name:
     'guideLink',
    
   

   
    
   
   
    
             component:Guide
    
   

   
    
   
   
    
           },
    
   

   
    
   
   
    
           {
    
   

   
    
   
   
            
     path:
     '/about/contact',
    
   

   
    
   
   
    
             name:
     'contactLink',
    
   

   
    
   
   
    
             component:Contact,
    
   

   
    
   
   
    
             children:[            
    
   

   
    
   
   
    
               {                                     //三级路由
    
   

   
    
   
   
    
                 path:
     '/about/contact/personName',
    
   

   
    
   
   
    
                 name:
     'personNameLink',
    
   

   
    
   
   
    
                 component:PersonName,
    
   

   
    
   
   
    
               },
    
   

   
    
   
   
    
               {
    
   

   
    
   
   
                
     path:
     '/about/contact/phone',
    
   

   
    
   
   
    
                 name:
     'phoneLink',
    
   

   
    
   
   
    
                 component:Phone
    
   

   
    
   
   
    
               },
    
   

   
    
   
   
     
    
   

   
    
   
   
    
             ]
    
   

   
    
   
   
    
           }
    
   

   
    
   
   
    
         ]
    
   

   
    
   
   
    
       },

2、组件中嵌套使用<router-view></router-view>

1）一级路由

2）二级路由

3）三级路由

3、实现效果

（完）

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>