vue-router

路由相关知识

a用户发送一条信息，经过路由，路由会根据映射表，通过电脑的Mac地址找到对应的ip，然后将信息转发出去

什么是前端渲染，，，什么是后端渲染，，，，什么是前后端分离

• 后端渲染，传统的ASP、JSP、Java渲染机制
• 前端渲染 ，使用JS来渲染也免得大部分内容，代表的是当前流行的SPA单页面富应用,优点是：局部刷新、懒加载、富交互、节约服务器成本、分离设计

• 同构渲染指前后端共用JS，首次渲染使用node.js来直出HTML

  
  04-前端路由中url和组件的关系.jpg
  01-后端路由阶段.png

02-前端后端分离阶段.png 03-SPA页面页面的阶段.png

在不刷新页面的条件下，改变URL的两种方法

image.png

HTML5的History六中改变URL而不刷新页面

• replaceState:替换原来的路径(替换路径，不能返回)
• pushState：使用新路径
• popState:路径的回退
• go:向前或向后改变路径
• forward：向前改变路径（go（1））
• back：向后改变路径（go（-1））

路由工作的大致过程

image.png

在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

在子组件中获取到路由配置信息地址的内容

$route.params.指的是正处在活跃状态的路径信息

<b>{{$route.params.userId}}</b>

vue-router使用步骤

• 先下载对应的脚手架（记得要下载vue-router）
• 在components文件夹创建组件文件（.vue文件）
• 配置路由映射：组件路径之间的关系（router/index.html）
• 使用路由: 通过<router-link>（自动渲染成a标签）和<router-view>(App.vue模板)
• 在main.js里面进行使用,注意一定要导出的名字是 router

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

浏览器url得知路径模式 ----哈希模式转化为history模式

image.png

router-link补充

image.png

• 点击按钮的时候。会为该DOM元素增加一个类router-link-active
  可以将该类名修改

  // 将路由导入到vue实例当中
export default new Router({
  //配置组件和路由之间的关系
  routes: routers,
  mode: 'history',
  //修改点击之后增加的类名
  linkActiveClass: 'active'
})

懒加载

• 由于打包构建应用的时候，打包之后js文件会变得很大，如果一次性从服务器上面请求这些数据的话，会有点慢，甚至电脑上面还出现短暂的空白，所以我们要用到懒加载
• 懒加载的作用：将路由对应的组件打包成一个个对应的模块，当路由访问到其中的组建的时候，才回去加载对应的模块
• 懒加载操作

1. ES6方法 const Home = () => import('../components/Home.vue')
2. AMD写法：const About = resolve => require(['../components/About.vue'], resolve);
3. 结合Vue的异步组件和Webpack的代码分析：const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
   打包之后是： image.png

打包之后的文件命名问题

const routes = [{ path: "/", redirect: "/home" },
  {
    path: "/home",
    component: () =>
      import ( /*webpackChunkName:"home-chunk"*/ "../package/Home.vue")
  },
  {
    path: "/about",
    component: () =>
      import ( /*webpackChunkName:"about-chunk"*/ "../package/About.vue")
  }
];

image.png

• 错误页面
  设置，最后有*号表示会把路径按照‘/'划分成数组

{
    path: "/:pathMatch(.*)*",
    component: () =>
      import ( /*webpackChunkName:"about-chunk"*/ "../package/NotFound.vue")
  }

使用

<p>{{$route.params.pathMatch}}</p>

路由嵌套

image.png

• 实现方法

1. 先写出两个组件文件
2. 将其导入到路由配置文件当中进行配置

{
            //父组件
      path: '/home',
      component: Home,
      //定义子路由
      children: [{
     //默认进入的路径
        path: '',
        redirect: 'message'
      }, {
        path: 'message',
        component: Message
      }, {
        path: 'news',
        component: News
      }]
    }

• 在父组件当中展示

<template>
  <div>
<p>我是首页组件</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
  </div>
</template>

传递参数

• 先生成一个组件
• 在路由配置文件中进行配置
• 将其展示出来，并配置路径
  ？query(通过&进行拼接)

<router-link :to="{path:'/info',query:{name:'guo',age:18,hight:188}}" tag="button">关于</router-link>

$route和$router的区别

• $route,在子组件中使用，获取到的是正处于活跃状态的vue组件的路由配置信息

<p>{{$route.query}}</p>

• router方法：

  
  
  可以传入一个对象

image.png image.png

• $router为VueRouter实例，可以要导航到不同URL

homeClick(){
            this.$router.push('/home')
            console.log('homeclick');
        }

image.png

在setup（）获取route和router的方法

image.png
变量是自定义的

router-link的v-slot

image.png

router-view的slot

动态添加路由

image.png

删除路由

image.png

导航守卫

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

• 类似的钩子函数还有create（），当初始化一个vue实例的时候，自动调用该函数
• 参数解析导航钩子的三个参数解析:
  to: 即将要进入的目标的路由对象.
  from: 当前导航即将要离开的路由对象.
  next: 调用该方法后, 才能进入下一个钩子.

• 路由对象

  
  image.png
• to：即将进入的路由Route对象；
• from：即将离开的路由Route对象；
• next不常用

 //router是vue的实例
router.beforeEach((to, from, next) => {
  console.log(to);
  //matched[0]表示路由嵌套的父路由
  console.log(to.matched[0].meta.title);
  document.title = to.matched[0].meta.title
    //表示继续执行下一步
  next()
})

返回值

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

<keep-alive exclude="message,User">
    <!-- exclude属性里面包含的是组建的name属性，且之间不能有空格，表示的是，只要里面包含的组件都不会背缓存 -->
        <router-view></router-view>
</keep-alive>