VUE_路由(Router)

拼搏现实的明天。 2022-04-11 10:18 217阅读 0赞

> 最近VUE很火的前端，专门花了点时间学习，里面提到路由的概念，在这进行记录学习

# 1.引入Roulter #

> npm install vue-router --save

# 2.创建组件 #

> 路由组件一般放在views或pages包下  
> 非路由组件一般放在components包下

> 创建两个测试用的路由组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70][]

# 3.创建路由器 #

> 路由器一般专门定义一个包，如：可放在名为router的包下

> 利用js创建路由器，将上面创建的路由组件引入路由器

/*
    路由器模块
     */
    import Vue from  "vue"
    import VueRouter from "vue-router"
    
    import About from "../views/About.vue"  //路由组件
    import Home from "../views/Home.vue"    //路由组件
    
    Vue.use(VueRouter)
    
    export default new VueRouter({//向外暴露路由器对象
      //配置N个路由
      routes:[
        {
          path:"/about",
          component:About
        },
        {
          path:"/home",
          component:Home
        },
        {
          path:"/",//默认打开的路由组件
          redirect:"/about"//重定向到about
        }
      ]
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 1][]

# 4.配置路由器 #

> 上面已经创建的路由组件与路由器，现在我们需要将路由器配置到VUE中
> 
> 在入口js(main.js)中进行配置

import Vue from 'vue';
    import App from './App.vue';
    import router from "./router"  //引入路由器
    
    
    new Vue({//配置对象的属性名都是一些固定的名称，不可随便修改
      el:"#app",
      components:{App},
      template:"<App/>",
      router:router  //配置路由器
    })

# 5.使用路由 #

> 在页面中通过路由来使用路由组件，
> 
> 在这个demo中我在App.vue中使用了路由

<template>
      <div>
    
        <div class="row">
          <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
              <router-link to="/about" class="list-group-item">About</router-link>
              <router-link to="/home"  class="list-group-item" >Home</router-link>
            </div>
          </div>
          <div class="col-xs-6">
              <div class="panel">
                  <div class="panel-body">
                     <router-view></router-view>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {// 向外默认暴露一个出口(对象)
    
      };
    </script>
    
    <style>
    
    </style>

> 通过<router-link to="/about"></router-link>,定义跳转的路由组件
> 
> 通过<router-view></router-view>,引入相应的路由组件

到这里，路由的基本配置与使用就ok了，我个人觉着最重要的还是理解。感觉VUE真的太便捷了，跟java的设计思想与很多相似之处，用多了，估计原生js估计也会落下很多，但在企业开发中，VUE开发确实方便快捷！VUE YES!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70]: /images/20220411/8fcbc3627d0b4d3a8c4305a3f4a7cb72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 1]: /images/20220411/f385a512a84846859d475b4cd19436f3.png