Vue之路由(三)

Vue之路由

路由就是页面顶部的hash地址对应组件之间的关系

前端路由的工作方式

1.用户点击路由链接

2.页面顶部hash地址变化

3.前端路由监听hash地址变化

4.路由把hash地址对应的组件渲染到浏览器中

1.Vue-router

vue-router是Vue官方提出的路由解决方案，他只能结合Vue项目使用，不能在react项目中使用。能够轻松的管理SPA项目的组件的切换。

路由的基本用法

1.安装

npm i vue-router@3.5.2 -S

2.创建路由模块

在src源代码目录下，新建router/index.js路由模块

index.js

import Vue from 'vue'
import Router from 'vue-router'

// 将vue-router安装为Vue项目的插件
Vue.use(Router)

// 创建router实例对象
const router = new Router()

// 向外导出router实例对象
export default router

3.导入并挂载路由模块

在项目核心模块中编写：src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'

Vue.config.productionTip = false

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

4.声明路由链接和占位符

声明路由与组件之间的关系：

在router/index.js中：

import Vue from 'vue'
import Router from 'vue-router'

// 导入的组件
import