Vue 路由管理

蔚落 2023-06-04 07:54 64阅读 0赞

### 文章目录 ###

*   *  Vue 路由管理
     *  官网描述
     *  例子：
     *   *  根组件（ 使用路由）
         *  注册两个路由组件
         *  注册路由管理器
         *  入口main函数
         *  项目结构
         *  结果如图

## Vue 路由管理 ##

## 官网描述 ##

官网 ： https://router.vuejs.org/zh/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]

其实说白了就是原先我们是用a标签进行页面跳转

使用vue中路由后，在注册组件之后，我们在页面中使用进行配置，用法与标签一样。然后跳转到的页面内容，由标签渲染出来。

## 例子： ##

### 根组件（ 使用路由） ###

<template>
      <div id="app1">
        <h2>基本路由1</h2>
        <div>
          <div>
            
            <router-link to="/about" class="class-router">about</router-link>
            <router-link to="/home" class="class-router"> home</router-link>
          </div>
          
          <div>
            <router-view> </router-view>
          </div>
    
        </div>
    
      </div>
    
    
    </template>
    
    <script>
    
    export default {
    }
    </script>
    
    <style>
    </style>

### 注册两个路由组件 ###

About.vue

<template>
    <div>
      about ..............................
    </div>
    
    </template>
    
    <script>
      export default {
      }
    </script>
    
    <style>
    </style>

Home.vue

<template>
    <div>
      home
    </div>
    </template>
    
    <script>
      export default {
      }
    </script>
    
    <style scoped>
    div{
      color: red;
    }
    </style>

### 注册路由管理器 ###

index.js

/** 路由器模块 **/
    
    //引入Vue 和 路由插件
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    
    
    //引入路由组件
    import About from '../pages/About'
    import Home from '../pages/Home'
    
    //调用路由器
    Vue.use(VueRouter)
    
    //向外暴露路由器对象
    export default new VueRouter({ 
    //n个路由
    
      routes:[
      { 
        path:"/about",
        component:About
      },
      { 
        path:"/home",
        component:Home
      },
      //默认请求
      { 
        //根路径
        path:'/',
        redirect:'/about'
      }
    ]
    
    })

### 入口main函数 ###

/* 入口js: 创建Vue实例 */
    //引入路由器
    import router from './router'
    
    
    
    new Vue({ 
    // 配置路由器
      router
    })

### 项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]

可能遇到问题

`<router-view> </router-view> 内容不显示 无法跳转到路径对应的路由界面中`

原因是： 设置路由器是 `routes` 而不是 `routers` ！

### 结果如图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]: /images/20230601/f8c964e1d442453c8be680c458eacd87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 1]: /images/20230601/0e9da603c75e45d1a75b60894933de71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 2]: /images/20230601/b0b2154b69b1494391bfe4f3e1135ef5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70 3]: /images/20230601/9d95c6ee93524ce9bb61f1093867aa98.png