单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active

单页应用和多页应用

单页面应用: 所有功能在一个页面上实现
● 一个.html文件
● 前端路由
● 组件化开发
网易云音乐 小米移动端
多页应用：与单页应用相对应的，不同的功能通过不同的页面来实现

单页面-多页面对比

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

路由

路由理解的概念

路由：就是一一对应关系的集合。

前端路由（单页应用程序）： 一个url地址，对应哪个组件
后端路由：一个接口地址，对应哪一段接口地址

前端路由

后端路由

前端路由工作原理

目标

前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构

分析

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

背景知识

地址栏中的hash值

思路

1. URL 地址栏中的 Hash 值发生了变化
2. 前端js监听了到 Hash 地址的变化window.οnhashchange=()=>{}
3. 前端js把当前 Hash 地址对应的组件渲染都浏览器中

前端路由简单实现

1. src/views/创建并在App.vue里导入和注册组件
   MyHome.vue
   MyMovie.vue
   MyAbout.vue

<script>
import MyAbout from './views/my-about.vue'
import MyHome from './views/my-home.vue'
import MyMovie from './views/my-movie.vue'
export default {
  components: {
    MyHome,
    MyAbout,
    MyMovie
  }
}
</script>

2. 通过动态组件, 控制要显示的组件

<template>
  <div>
    <h1>App组件</h1>
    <component :is="comName"></component>
  </div>
</template>

<script>
export default {
  // ...省略其他
  data () {
    return {
      comName: 'MyHome'
    }
  }
}
</script>

3. 声明三个导航链接, 点击时修改地址栏的 hash 值

<template>
  <div>
    <h1>App组件</h1>
    <a href="#/home">首页</a>&nbsp;
    <a href="#/movie">电影</a>&nbsp;
    <a href="#/about">关于</a>&nbsp;
    <component :is="comName"></component>
  </div>
</template>

4. 在 created 中, 监视地址栏 hash 时的变化, 一旦变化, 动态切换展示的组件

created () {
window.onhashchange = () => {
      console.log(window.location.hash)
      const { hash } = window.location
      if (hash === '#/home') {
        this.comName = 'my-home'
      } else if (hash === '#/movie') {
        this.comName = 'my-movie'
      }else if (hash === '#/about') {
        this.comName = 'my-about'
      }
    }
},

小结

改变浏览器url的hash值, JS监听到hash值改变, 把对应的组件显示到同一个挂载点

路由-官方路由基本使用

vue-router文档
说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

步骤

1. 安装包
2. 配置路由
3. 使用路由

操作

1. 安装 npm i vue-router@3.5.3

vue2要安装vue-router3版本的路由
vue3要安装vue-router4版本的路由

2. 创建路由文件
   router/index.js

// 配置路由
// 一段固定的代码
// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
 routes: [
    { 
      // 进入 / 路径，自动跳转到 /home
      path: '/', 
      redirect: '/home'
    },
    // { 
    //   // 进入 /a 路径，自动跳转到 /b
    //   path: '/a', 
    //   redirect: '/b'
    // },
    {
      path: "/home", // 当浏览器访问 http://localhost:8080/#/home时，
      component: MyHome  // 装入组件 MyHome
    },
    {
      name: 'movie',
      path: "/movie", // 当浏览器访问 http://localhost:8080/#/movie时，
      component: MyMovie  // 装入组件 MyMovie
    },
    // news/:id 可以匹配如下地址:
    // http://localhost:8080/#/news       ==》 无法匹配
    // http://localhost:8080/#/news/123   ==》 id就是123
    // http://localhost:8080/#/news/3456  ==》 id就是3456
    {
      name:"news",
      // path: "/news/:id/:name", // 
      path: "/news/:id", // 
      component: MyNews  // 装入组件 MyNews
    },
    {
      path: '/sport',
      component: Sport,
      // 配置二级路由
      children:[
        {
          path:"", // path为空，表示 /sport时，默认展示这个组件
          component: SportIndex
        },
        {
          path: '/china', // path以/开头，表示 /china时，展示这个组件
          component: China
        },
        {
          path: 'usa', // path以不以/开头，表示访问地址要加上上级路由的地址。localhost:3000/#/sport/usa
          component: USA
        }
      ]
    },
    {
      // 所有的路由都不匹配，就默认匹配*，显示404
      path: '*',
      component: Page404
    }
  ]
})

export default router

3. 使用路由 在main.js中

import router from './router/index.js'

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

4. 使用路由

<router-view></router-view> //占位

小结

下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

链接导航-router-link

Router-link组件介绍

作用： 用于提供路由链接，实现页面跳转
格式: <router-link to="/home">首页</router-link>
要点：
● 是vue-router提供的组件
● router-link最终会渲染成a链接
● router-link自带链接导航高亮的功能

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

激活类名router-link-exact-active

router-link-exact-active router-link-active
router-link-exact-active:精确匹配,路径要完全一致(用在子路由上,子路径里必须带上父路由的路径)
router-link-active:模糊匹配,路径里含有即可(用在父路由上)

小结

链接导航, 用router-link配合to, 实现点击切换路由
● router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。
● 如果当前路由被激活会添加特殊的类名：router-link-exact-active router-link-active

页面跳转传参

vue路由传参的方式

小结

• ?key=value 用 $ route.query.key 取值
• /值-需要提前在路由设置规则/path/:key 用 $ route.params.key 取值

路由-重定向

理解

重定向， 用户访问的是A地址，系统把它切换到B地址。

应用场景：

改变默认访问页面的行为

示例

在router/index.js - 修改配置

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  }
]

路由404

统一处理异常地址：那些个正常配置的地址之外的地址。

代码
修改路由规则即可：

通过通配符*，设置404页面

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

编程式导航

编程式导航
编程式： 写代码
导航：页面跳转

编程式导航 ====> 写代码的方式来让页面跳转

API

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()

routes  :路由匹配规则  router文件
$route  :获取参数对象 this.$route
$router :路由跳转对象 this.$router.push()

{
	path:'/dashboard/:id/:age',//params传参需要占位
	name:'Dashboard',
	component:()=>import('@views/dashboard/index')
}

//query传参
this.$router.push('/dashboard?id=1&name=rose')
this.$router.push({path:'/dashboard',query:{id:2,name:'jack'})
this.$router.push({name:'Dashboard',query:{id:2,name:'jack'})
//query传参
params传参不能用path
this.$router.push('/dashboard/2/jack')
this.$router.push({name:'Dashboard',params:{id:2,name:'jack'})
query和query一起传参
/dashboard/123/tom?id=2&name=jack
this.$router.push({name:'Dashboard',query:{ids:2,names:'jack'},params:{id:123,name:'tom'})

<router-link to="/dashboard/123/tom?id=2&name=jack">去首页===相当于a标签</router-link>
<router-link :to="{path:'/dashboard/22/19'}">去首页===相当于a标签</router-link>
<router-link :to="{name:'Dashboard',query:{ids:2,names:'jack'},params:{id:123,name:'tom'}">去首页===相当于a标签</router-link>

路由嵌套

原理：router-view中再次包含router-view。
背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。
格式：

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]

总结：

1. 在已有的路由容器中，再实现一套路由，再套一个路由容器，叫：嵌套路由。
2. 嵌套路由除了 router-view 之间需要嵌套，路由规则也需要通过children来实现嵌套。