Vue路由，vue-router ，路由跳转 Vue全家桶第一桶

前端路由单页面

只有一个HTML 页面 所有功能在一个页面上实现
优点：

• 整体不刷新页面，用户体验更好
• 数据传递容易, 开发效率高
  缺点：
• 开发成本高(需要学习路由)
• 首次加载会比较慢一点。不利于seo搜索引擎优化

依赖路由切换页面

vue-router

本质：是一个第三方包
基本使用：
1.下载vue-router

yarn add vue-router

2.引入 （在main.js中）

import VueRouter from 'vue-router'

3.注册全局组件

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

4.定义规则数组

const routes = [{
    
path:"/xxx",
component:xxx
}]

5.生成路由对象

const router = new VueRouter({
   
  routes //routes 是固定key（传入规则数组）
})

6.关联Vue实例对象

new Vue({
   
  router
})

7. 设置挂载点-当url的hash值路径切换，显示规则里对应的组件

<router-view></router-view>

在引用路由时 通过 @/ 用当前 src 的绝对路径引入

import NotFound from '@/views/NotFound'

声名式导航

vue-router 提供了一个全局组件 router-link

<router-link to="/xx"> </router-link