【VueRouter 源码学习】第二篇 - 路由的配置和使用

BraveWang
230 阅读4分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

一，前言

上篇，介绍了源码环境搭建与路由模式，主要涉及以下几个点：

  • 完成了 VueRouter 源码项目开发环境的搭建；
  • 介绍了 Hash 和 History 两种路由模式;

本篇，路由的使用介绍；

二，VueRouter 的使用

2.1，安装依赖

npm install vue-router

2.2，注册路由插件，导出路由实例

创建 router.js 管理路由插件的配置，并导出 Router 实例：

import Vue from 'vue';
import Router from './vue-router';

// 通过 Vue.use 使用 Router 插件：
// 全局注册两个组件：router-link、router-view；
// 为实例提供两个原型属性：$router，$route；
Vue.use(Router);

export default new Router({
  mode:'hash',
  routes:[
    {
      path:'/',      // 路径
      name:'',       // 名字
      component:ABC  // 路径显示的组件
    }
  ]
});

2.3，标签和属性的介绍

执行Vue.use(Router)之后，默认会调用 Router 插件的 install 方法：

  • 全局注册两个组件：<router-link> 和 <router-view>；
  • 并且为vue实例提供两个原型上的属性：$router 和 $route；

以下内容来自 VueRouter 官网： image.png image.png image.png

2.4，配置视图组件

创建视图组件： views/Home.vue 和 views/Mine.vue：

<!-- views/Home.vue -->
<template>
  <div>首页</div>
</template>

<!-- views/Mine.vue -->
<template>
  <div>我的</div>
</template>

引入视图组件，配置路由和视图的映射关系：

import Vue from 'vue';
import Router from './vue-router';
import Router from './node_modules/vue-router';
import Home from './views/Home';
import Mine from './views/Mine';

Vue.use(Router);

export default new Router({
  mode:'hash',
  routes:[
    {
      path:'/',       // 路径
      name:'',        // 名字
      component: Home // 路径显示的组件
    },{
      path:'/',
      name:'',
      component: Mine
    }
  ]
});

2.5，将 Router 实例注册到 Vue 实例中

引入 router.js 中配置完成的路由实例，并将路由实例注册到 Vue 实例中：

// main.js

import Vue from 'vue';
import router from './router';  // 导入路由配置

const vm = new Vue({
  el:'#app',
  router, // 将路由实例注册到 Vue 实例中
  render:(h)=>{
    return h('h1', {}, 'Hello Vue Router');
  }
});

2.6，配置路由组件的渲染位置

创建根组件 App.vue 用于显示视图渲染后的结果：

<template>
    <div>
        <!-- 页面渲染结果 -->
        <router-view></router-view>
    </div>
</template>

使用 h 方法渲染 App.vue，使 App.vue zuo 作为视图入口：

import Vue from 'vue';
import router from './router';
import App from './App.vue';

const vm = new Vue({
  el:'#app',
  router,
  render:(h)=>{
    return h(App);// 使用 h 方法渲染 App 组件
  }
});

2.7，启动服务并测试

vue serve

根据路由配置，测试对应视图的显示：

访问首页：http://localhost:8080/#/

image.png

访问我的：http://localhost:8080/#/ mine

image.png

备注：由于理由使用了 hash 模式，URL 默认会被添加 '/#/' 部分

2.8，添加路由的切换

<template>
    <div>
        <!-- 添加路由切换 -->
        <router-link to="/">跳转至首页</router-link>
        &nbsp
        <router-link to="/mine">跳转至我的</router-link>
        <!-- 显示页面渲染的内容 -->
        <router-view></router-view>
    </div>
</template>

2.9，测试路由切换效果

点击跳转到首页，浏览器访问：http://localhost:8080/#/

image.png

点击跳转到我的，浏览器访问：http://localhost:8080/#/mine

image.png

2.10，实例属性 $route 和 $router

执行Vue.use(Router)之后，默认会调用 Router 插件的 install 方法：

  • 全局注册两个组件：<router-link> 和 <router-view>；
  • 并且为vue实例提供两个原型上的属性：$router 和 $route；

测试 Vue 实例上的 router和router 和 route：

// views/Home.vue

<template>
  <div>首页</div>
</template>

<script>
export default {
    mounted(){
      // this.$route：路由相关的属性
      // this.$router：路由相关的方法
      console.log('this.$route', this.$route)
      console.log('this.$router', this.$router)
    }
}
</script>

image.png

  • $route：包含了路由相关的属性；如：name、hash、meta 等；
  • $router：包含了路由相关的方法；如：history API（push、replace、go）；

2.11，嵌套路由的使用和注意事项

VueRoute 支持嵌套路由（理论上是无限级的）；

测试：在 mine 视图中添加子路由：

import Vue from 'vue';
import Router from './node_modules/vue-router';
import Home from './views/Home';
import Mine from './views/Mine';

Vue.use(Router);

export default new Router({
  mode:'hash',
  routes:[
    {
      path:'/',
      component: Home
    },{
      path:'/mine',
      component: Mine, 
      children: [{           // 子路由
            path: 'user',    // 如果是 /user 会被认为根路径，所以不能有/
            component: {
              render:(h)=><h1>个人信息</h1>
            }
        },
        {
            path: 'address',
            component: {
              render:(h)=><h1>地址管理</h1>  
            }
        }
      ]
    }
  ]
});

备注：

若子路由路径的开头为'/',将表示为根路径；子路由一般不使用'/'开头；
如：path:'/user' -> http://localhost:8080/#/user

子路由路径开头使用'/'，需要配置为准确的 URL 地址；
如：path:'/mine/user' -> http://localhost:8080/#/mine/user

在我的页面添加 router-view 标签，配置个人信息和地址管理的渲染位置：

<template>
  <div>我的
    <router-link to="/mine/user">我的-个人信息</router-link>
    &nbsp
    <router-link to="/mine/address">我的-地址管理</router-link>
    <router-view></router-view>
  </div>
</template>

测试子路由效果：

我的页面：

我的

点击路由切换子页面：

个人信息

地址管理

三，结尾

本篇，介绍了路由的配置和使用，主要包含以下内容：

  • 路由插件的安装、配置和使用；
  • 介绍了VueRouter主要功能，标签和属性；
  • 介绍了嵌套路由的使用和注意事项；

下篇，介绍路由插件 install 的实现；

维护日志

  • 20210819：
    • 优化了部分描述和配图，使表述更加准确；
    • 添加了“嵌套路由的使用和注意事项”内容；
    • 更新了“文章标题”、“结尾”部分描述、“文章摘要”；
avatar
文章
阅读
粉丝