Vue路由（嵌套路由）的使用

￡神魔★判官ぃ 2021-09-20 09:08 605阅读 0赞

## **1、vue-router介绍** ##

vue-router是Vue.js的路由插件。适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。  
路径之间的切换实际上就是组件的切换。

## **2、安装 vue-router** ##

先要搭建vue工作环境，环境搭建请参考另外两篇：[Windows下的vue工作环境搭建][Windows_vue]和[linux下的vue工作环境搭建][linux_vue]。

## 3、创建项目 ##

vue init webpack myobj     #创建一个vue项目
    
    #定位到myobj目录，执行npm install vue-router --save来安装路由组件。
    
    cd myobj
    npm install vue-router --save  #进入工程目录下再执行此命令

\#安装成功后，package.json中会自动添加 “vue-router”: "^3.0.6"路由组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]

## **4、vue路由源码（图示）** ##

**路由（嵌套路由）入门源码下载：[https://download.csdn.net/download/u012577474/11253385][https_download.csdn.net_download_u012577474_11253385]**

**这是主页：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]  
**这是game页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]  
**这是A页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]  
**这是B页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]

## **5、vue路由源码（解析）** ##

**目录结构：**  
![在这里插入图片描述][20190622132955476.png]  
assets目录下是资源图片。  
page目录下是各组件。  
page/gllgame下是子路由组件。

**index.html ：**

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <title>myobj</title>
            <style> #app{ border:1px solid #1f119c; } </style>
        
          </head>
          <body >
              <h1>《这里是index.html页》</h1>
              <h2>Vue嵌套路由学习，下面是嵌入的路由视图加载区域（用来加载root、game、A、B页面）：</h2>
            <div id="app">
        	  
            <router-view></router-view>  
        	</div>
            <script src="/dist/build.js"></script>
          </body>
        </html>

**main.js ：**

import Vue from 'vue'                //引用vue
    import VueRouter from 'vue-router'    //引用vue官方路由组件
    Vue.use(VueRouter)
    
    //引入组件 
    import root from "./page/root.vue"
    import game from "./page/game.vue"
    import GameOne from "./page/allgame/GameOne.vue"
    import GameTwo from "./page/allgame/GameTwo.vue"
    import A from "./page/A.vue"
    import B from "./page/B.vue"
    
    
    
    //定义路由 
    const routes = [
        // { path: "/", redirect: "/home" },//重定向,指向了home组件 
        {  path: "/", component: root },//重定向,指向了home组件 
        { 
            path: "/game", component: game,   //一级路由
            children:
                [{ 
                    path: "/game/gameone", component: GameOne,      //二级路由（game子路由）
    
                },
                { 
                    path: "/game/gametwo", component: GameTwo,  //二级路由（game子路由）
                }]
    
        },
    
        { 
            path: "/a", component: A,       //一级路由
        },
        { 
            path: "/b", component: B,      //一级路由 
        }
    
    ]
    //创建路由实例 
    const router = new VueRouter({  routes })
    
    //创建Vue实例
    new Vue({ 
        el: '#app',
        data: { 
        },
        methods: { 
        },
        router
    })

**root.vue ：**

<template>  
    <div id='rootbox'>
    <h2>[-----------------root页内容--------------]</h2>
    
    
    
    <router-link to="/game">  <button>跳转game页按钮</button>  </router-link>  
    <router-link to="/a">  <button>跳转A页按钮</button>  </router-link>  
    <router-link to="/b">  <button>跳转B页按钮</button>  </router-link>  
    
    <router-view></router-view>  
    
    </div>
    </template>
    
    
    <style>
        #rootbox{
             border:1px solid #F00;
    
        }
     </style>

**game.vue ：**

<template>  
    
            <div id="gmbox" >
               <h2>[-----------------游戏页内容--------------]</h2>
    
                <h3>点击下面按钮，选择你想玩游戏</h3> 
                <router-link to="/game/gameone">  <button>开始游戏One</button>  </router-link>  
                <router-link to="/game/gametwo">  <button>开始游戏Two</button>  </router-link>  
                <h3>@@@@@@@这里演示了嵌套路由@@@@@@@</h3>
                <div style="background:  rgb(0, 195, 255);height: 600px;width:800px;border:1px solid yellow; ">
                  <h2>[-----------------游戏加载区--------------]</h2>   
                  <router-view></router-view>  //路由视图显示
                </div>
             </div>   
    
     </template>
    
     <style>
        #gmbox{
    
             height: 860px;
             width: 1130px;
             border:1px solid #F00;     
             background:url(../assets/game.jpg );
    
        }
     </style>

**GameOne.vue 代码：**

<template>  
         <div style=" border:1px solid #F00; width:300px;height:300px;background: #FFC0CB">
         <h3  style="background: rgb(0, 174, 255)">我是游戏One</h3>  
        </div>
     </template>

**源码下载：[https://download.csdn.net/download/u012577474/11253385][https_download.csdn.net_download_u012577474_11253385]**

[Windows_vue]: https://blog.csdn.net/u012577474/article/details/92849764
[linux_vue]: https://blog.csdn.net/u012577474/article/details/92803464
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/f679e3d1493141b1ad8970d77da4706d.png
[https_download.csdn.net_download_u012577474_11253385]: https://download.csdn.net/download/u012577474/11253385
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: /images/20210726/1678ea8d05bb4be29af4c4d5fbc12083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: /images/20210726/b6bef303edb14c25ba1399487cbd9503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: /images/20210726/ecaa82093d5944508489ad7a294f1cbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: /images/20210726/3793295eb5de4476af4779f37daa6a18.png
[20190622132955476.png]: /images/20210726/d4f161ecbd104811a76258ca73d92ea6.png