vue之vue-router安装

一.原理

1.路由的功能:

路由的功能是建立映射关系,vue-router的作用就是建立url和组件之间的映射关系.

2.支持

通过路径的hash和history可以在url发生改变的情况下不会重新请求资源

• hash:location.hash='xxx',在调用该函数后,浏览器的url会发生改变,会出现/#xxx的结尾,此时路径该变可以被vue-router监听到,但是路径本身改变不会向服务器重新请求资源
  例如:
  打开一个网页:
  带地址的图片上传显示图片违规,所以用文字了
  打开一个原始网页,以百度首页为例:baidu.com
  改变hash:
  
  结果:
  baidu.com/#/aaa

• history:history中有pushState({data}, 'title', 'url'),back(),forwark(),go(数字),replaceState()等函数,在调用这些函数时,浏览器中的url会出现/xxx的结尾,此时路径该变可以被vue-router监听到,但是路径本身改变不会向服务器重新请求资源
  例如:
  依然使用百度首页为例
  push路径到history栈中
  
  结果:
  baidu.com/aaa/

所以使用vue-router监听浏览器中url变化,从而渲染映射的组件,实现单页面复应用

二. 安装

1. 安装路由模块

npm install vue-router --save

2. 项目中安装路由功能

案例使用vue-cli创建的项目,在router目录下的index文件中的配置

• 导入路由对象并调用Vue.use(VueRouter)(在项目中安装路由功能)

// 配置路由相关信息
// 导入Vue实例
import Vue from 'vue'
// 导入路由插件
import VueRouter from 'vue-router'

// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter);

• 创建路由实例并传入路由映射配置

// 简单的映射配置
const routes = [{
    path: '/',
    // 路由重定向
    redirect: '/home',
  },
  {
    path: '/home',
    // 路由映射组件
    // 使用前先将Home组件导入
    component: Home,
    // 在路由中定义组件元数据
    meta: {
      title: '首页'
    }
  },
]

// 创建路由实例
const router = new VueRouter({
  // 路由和组件之间的映射关系
  // routers: routers的简写
  routes,
  // 使用history模式,也可以使用hash模式
  mode: 'history',
});

// 3.将router对象导出
export default router;

• 在vue实例中挂在路由实例

main.js中挂载路由

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

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

$日期：2021-11-10$