“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

Vue路由原理(vue-router)

1.什么是路由?

后端路由（接口文档）：一个路径与处理函数的对应关系
前端路由:一个路径和页面的对应关系

2.路由的原理

使用路由的经典网页:网易云音乐

2.1网易云url解读

网易云主页发现音乐url:

music.163.com/#

网易云我的音乐url:

music.163.com/#/my/

网易云关注url:

music.163.com/#/friend

URL组成: 协议名://域名/#哈希值

2.2路由的原理：监听页面hash值

*网页的hash值变化，页面不会跳转的

(1)修改网页的hash值

-   hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转

(2)给window注册onhashchange事件，监听hash值变化

-   当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面

3.单页面SPA应用(singal page application)

多页面应用:一个页面对应一个HTML
单页面应用:一个HTML对应多个页面

对比部分	单页应用	多页面应用
组成	一个html文件多个组件组成	多个html文件
静态资源共用	共用，一次性加载完毕	不共用，每个页面都加载一遍
刷新方式	页面局部刷新	整页加载
url模式	music.163.com/#/my/	music.163.com/my.html
用户体验	用户体验良好	页面切换加载缓慢体验较差
数据传递	容易	依赖url传参，cookie,localStorage
搜索引擎优化	不利于seo优化，需要ssr优化(服务端渲染)	支持良好
使用场景	追求高体验不要求seo	高度要求seo
开发成本	较高需要依赖专业的框架, 开发效率高	较低重复代码多, 开发效率低

4.Vue路由手动使用流程

前置要求:已经用vue ui创建脚手架并且没有下载vue-router

4.0下载与导入路由

下载

npm i vue-router

4.1在main.js中导入组件

4.2在main.js中配置路由规则

4.3在main.js中导入路由

4.4在main.js中挂载路由

/*
0.下载与导入路由
npm i vue-router
*/
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 1.导入组件
import Home from "@views/Home.vue"
import List from "@views/List.vue"
// 2.配置路由规则
const routes = [
  { path: '/home', component: Home },
  { path: '/list', component: List },
]
// 3.创建路由对象
const router = new VueRouter({
  routes
})
// 4.挂载路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.5在App.vue中写路由导航router-link标签

路由导航 router-link：这是vue内置组件，默认渲染成一个a标签
to属性：相当于a标签的href

4.6在App.vue中写路由出口router-view标签

router-view ：这是vue内置组件，默认渲染成一个空的div.

<template>
  <div>
    <h1>APP</h1>
<!-- 5.在页面写路由导航router-link （生成a标签） -->
<!-- 路由导航  
<router-link >：这是vue内置组件，默认渲染成一个a标签
to属性：相当于a标签的href
 -->
    <router-link to="/home">(1)go home</router-link>
    <a href="#/home">(2)go home</a>
 <!--  6.在页面写路由出口router-view (生成占位盒子，用于显示页面内容)-->
    <router-view></router-view>
  </div>
</template>

4.7 模块化路由

在src中新建一个router文件夹,新建一个index.js

把4.0到4.3的代码剪切到index.js中
此外还要导入Vue import Vue from 'vue'
并且导出路由对象 export default router

/router/index.js如下

import Vue from 'vue'
/*
0.下载与导入路由
npm i vue-router
*/
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 1.导入组件
import Home from "@/views/Home.vue"
import List from "@/views/List.vue"
import Login from "@/views/Login.vue"
// 2.配置路由规则
const routes = [
  { path: '/home', name: "home", component: Home },
  { path: '/list', name: 'list', component: List },
  { path: '/login', name: 'login', component: Login },
]
// 3.创建路由对象
const router = new VueRouter({
  routes
})
//导出路由对象
export default router

在main.js中导入路由

import Vue from 'vue'
import App from './App.vue'
// 导入路由   为什么./router后面不写/index.js  不写的话默认加载该目录下的index文件
import router from './router'


Vue.config.productionTip = false


// 4.挂载路由

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

5.自动配置路由

5.1vueui 创建脚手架的勾选 vue-router选项

5.2在根目录执行: vue add router

5.3修改为自己的页面

1.把views下的组件修改为自己的组件

2.修改router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.导入组件
import Login from  "../views/Login.vue"
import Home from  "../views/Home.vue"

Vue.use(VueRouter)
// 2.配置路由路径
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/Login',
    name: 'Login',
    component: () => import( '../views/Login.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.修改主要组件App.vue的html结构

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/login">Login</router-link>
    </nav>
    <router-view/>
  </div>
</template>

实现效果

一篇文章教会你Vue路由(vue-router)的原理和如何使用