vue路由 vue-router的使用及vue-router基本原理

Vue.js 中使用 vue-router 实现路由的基本步骤：

1.安装 vue-router

在命令行中运行以下命令安装 vue-router：

npm install vue-router

2.引入 vue-router

在 main.js 中引入 vue-router：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.配置路由

在项目目录中新建一个 routes.js 文件，配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue' 
import About from './views/About.vue' 
const router = new Router({ 
       routes: [ 
            { path: '/', name: 'home', component: Home },
            { path: '/about', name: 'about', component: About },
            {
              path: '/screen',
              name: 'screen',
              component: resolve => require(['@/components/screen/index'], resolve)}
        ] 
    }) 
export default router

4.注册路由

在 main.js 中注册路由：

import router from './routes' 
    new Vue({ 
        router, 
        render: h => h(App), 
    }).$mount('#app')

5.使用路由

在 App.vue 中使用 router-view 和 router-link 组件：

<template> 
    <div id="app"> 
        <router-link to="/">Home</router-link> 
        <router-link to="/about">About</router-link> 
        <router-view /> 
    </div> 
</template>

可以通过修改 routes.js 文件中的路由配置来添加更多的路由路径和组件。

vue-router基本原理：

其原理主要就是监听 hashchange 事件或者使用 HTML5 的 History API，在页面 URL 变化时动态匹配路由规则并加载相应的组件。

vue-router 基于 Vue.js 组件化的思想和核心 API 实现的。

具体步骤如下：

1.定义路由配置：即定义每个路由对应的组件组成的对象，并指定路径和任意的请求参数。可以通过对象字面量、Vue.extend 或 import 导入等方式定义。

2.创建 Router 对象：该对象会将路由配置转换为路由映射表，它还负责监听浏览器地址变化、根据当前 URL 自动调整路由以及动态加载组件等工作。

3.将 Router 注册到 Vue 实例上：这样 Vue 实例就能获取到 Router 对象并使用它提供的全局方法以及挂载路由视图解析组件。

4.在组件中使用 router-link 和 router-view：前者是进入链接，后者是展示路由组件的占位符。

当用户点击不同的链接或手动输入 URL 时，vue-router 引擎实际会操作浏览器地址栏的 hash（#）或 pathname，然后基于路由映射表进行匹配，再动态地加载匹配到的组件并渲染到页面中。

此外，在路由导航开始前、路由参数变化时、全局路由守卫等情况下都会触发一系列钩子函数，开发者可以使用这些函数进行自定义处理。