10-Vue:路由

1.路由器

服务端路由
接口和服务的映射关系

前端路由
vue是单页面应用：vue只有一个html页面,项目中的内容都分别写到各自的组件中，切换组件来显示不同的内容
缺点： 第一次加载，会加载所有的组件 慢 时间长
优点：
1：良好的交互体验 （局部渲染，每个部分是单独的模块，避免了不必要的跳转和重复渲染）
2：前后端分离 减少开发效率，架构清晰
3：减轻服务器的压力
不同路由，切换不同的组件

2.组件分类

vue文件分2类，一个是页面组件，一个是复用组件

views 页面组件–页面展示–配合路由使用

components 复用组件–展示数据/常用于复用

3.vue-router介绍

在vue项目中集成路由
https://router.vuejs.org/zh/index.html
使用
1.安装

yarn add vue-router

2.src目录下新建router/index.js

// 引入vue   vue-router和vue是深度集成
import Vue from 'vue'
// 导入路由
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import Part from '../views/Part.vue'
import Find from '../views/Find.vue'

// 在vue中，使用vue的插件，都需要调用vue.use()
Vue.use(VueRouter)

// 创建路由规则  一一对应关系
const routes = [
  {
    path: '/home',  //路由地址
    component: Home 
  },
  {
    path: '/part',
    component:Part
  },
  {
    path: '/find',
    component:Find
  }
]

// 创建路由对象
const router = new VueRouter({
  // 路由规则
  routes
})

// 暴露路由对象
export default router

3.main.js中把路由关联到vue实例

import Vue from 'vue'
import App from './App.vue'
// 导入路由对象
import router from './router'
import store from './store'



Vue.config.productionTip = false

new Vue({
  // 把路由对象注入到vue实例中 在任何一个组件中就可以使用路由对象
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.App.vue中写路由出口

4.声明式导航

使用全局组件router-link来替代a标签
1.vue-router提供了一个全局组件 router-link;
2.router-link实质上最终会渲染成a标签， to属性等同于href属性;
3.router-link提供了生命是高亮的功能 （自带类名）

<template>
  <div>
    <div class="wrap">
      <router-link to="/">首页</router-link>
      <router-link to="/part">part</router-link>
      <router-link to="/find">发现</router-link>
    </div>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

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

<style scoped>
/* 模糊匹配  /part中有/  */
.router-link-active {
  color: red;
}
/* 精确匹配 */
.router-link-exact-active {
  background-color: yellow;
}
</style>

5.重定向

路由规则中没有要匹配的路由，用户体验就会很差，重定向到指定的路由

网页默认打开，匹配路由 ‘/’ ,强制切换到 ‘/find’上

const routes = [
{
path: ‘/’, //路由地址
redirect:‘/find’,
component:Home
},
{
path: ‘/find’, //路由地址
component:Find
},
{
path: ‘*’, //匹配的是所有的路由
redirect:‘/’ //重定向
}
]

6.404页面

路由规则中没有要匹配的路由，用户体验就会很差，默认给一个404页面
创建NotFound页面

const routes = [
{
path: ‘*’, //路由地址
component:NotFound
},
]