Vue Router和前端路由原理

一、前端路由

什么是前端路由？简单地说，前端路由是一种根据url来渲染前端组件的技术。

前端路由应用于什么场景？多页面的场景，在多页面的场景下，相对于后端路由，前端路由由于可以实现无刷新的效果，用户体验更好。

比如，当我们的应用有两个页面，home主页，和user用户页面时候，我们希望https://my.domain.com/home访问到主页的内容，https://my.domain.com/user访问用户页面，我们就可以使用前端路由来实现。

使用前端路由，每个访问路径会对应一个组件，这个组件我们页称为页面。

二、Vue Router

注意本文中示例vue-router使用的版本是4

1. 路由配置

使用前端路由技术开发应用时候，我们希望指定url的路径与组件之间的对应关系，即当访问某个url时候，渲染哪个组件。

这是通过Vue Router提供的API：createRouter方法来实现的。具体使用为以下步骤：

1. 提供路由配置并传入到createRouter方法中
2. 在组件中通过指定组件渲染的位置，当路径匹配上时候，组件会替换掉标签。

// main.js

import { createApp } from 'vue';
import {createRouter, createWebHistory} from 'vue-router';
import routerConfig from './route.config';
import App from './App';

const router = createRouter({
    history: createWebHistory(),
    routes: routerConfig
});

createApp(App).use(router).mount('#app')

// route.config.js
import Home from './pages/home';
import User from './pages/user';

export default [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/user',
        component: User
    }
];

// App.vue
<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {};
</script>

上面实例代码展示了基本的路由配置，当访问localhost:8080/home时候，会渲染Home组件，当访问localhost:8080/user时候会渲染user组件。

当在全局注入了router（createApp(App).use(router)）之后，在组件中可以通过this.$route来访问路由对象。