路由相关知识

先引进一级路由 使用rooter-link标签，使用import 路由名 ‘路径名’ 来注册并调用路由

import Films from '@/views/Films.vue'
{
    path: '/films',
    component: Films,
}

再进行重定向操作，可以在URL地址上随机填写字符串，但url地址匹配不到路径，只能寻找重定向。使得所有匹配不到路径的url地址跳转到http://localhost:8080/#/films下

 {
    path: '*',
    redirect: 'films'
    // }

声明式导航

使用router-link属性 to表示要跳转的地址是，可以自定义样式名，有个tag属性（在Vue4中不支持），能将router-link父元素渲染成指定的标签中。其中router-view是路由容器，类似于插槽， 路由中的原理：

hash路由==>location.hash 切换

window.onhashchange 监听路径的切换

history路由==>history.pushState切换

window.onpopstate监听路径的切换

<div>
    <ul>
      <li>
        <!-- 声明式导航 -->
        <router-link to="/films" active-class="dqfactive">电影</router-link>
        <!-- 可以自定义样式名 -->
        <!-- tag属性 将会渲染成哪个节点  新版本不支持-->
      </li>
      <li>
        <!-- 声明式导航 -->
        <router-link to="/cinemas" active-class="dqfactive">影院</router-link>
      </li>
      <li>
        <!-- 声明式导航 -->
        <router-link to="/center" active-class="dqfactive">个人</router-link>
      </li>
    </ul>
    <router-view></router-view>
    <!-- 路由容器 -->
    <!-- 路由原理
hash路由==>location.hash 切换
window.onhashchange 监听路径的切换

history路由==>history.pushState切换
window.onpopstate监听路径的切换
-->

    <!-- vue4中 tag用不了  -->
  </div>

嵌套路由

在Films文件夹下，创建两个子路由文件，再在父界面的声明路由中，加入Chirdren列表。

 path: '/films',
    component: Films,
    // 嵌套路由 嵌套形式
    children: [
      {
        path: '/films/nowplaying',
        component: Nowplaying
      },
      {
        path: '/films/comingsong',
        component: Comingsong
      },
      {

替换形式的嵌套路由，再注册路由，path属性中，写在父路由/子路由中

{
    // 嵌套路由 替换形式
    path: '/cinemas/search',
    component: Search
  }

编程式导航

给一些元素绑定点击等操作时，可以使用dom原生的方法，其中this.$router能匹配到路由对象，它的back方法能返回上一个界面，官方提供的路径跳转方式 this.$router.push(`/detail/${id}`)，其中后面$id能获取到随着网页传过来的id值，再通过后端接口来获取详细信息，从而完成详细页面的编写。

动态路由，路由的命名

{ // 动态二级路由
    name: 'dqfDetail', // 命名路由
    path: '/detail/:id',
    component: Detail
  },

路由模式

在注册router是会提供mode属性，其中hash路径中会出现#，影响美观，history没有#，url地址很简洁，但history属性上线后，后端找不到接口，会导致404not found

全局路由拦截

如果想做一个登录后才能访问的界面，可以用全局路由来拦截，router.beforeEach方法有三个参数，第一个参数to 是进入路由模块，第二个参数是离开路由模块，第三个方法next（）是指进入该路由，所以要使用if-else语句进行判断条件。

// 全局拦截 路由拦截 路由守卫
router.beforeEach((to, from, next) => {
  console.log(to.fullpath)
  if (to.meta.isdqf) {
    // 判断本地存储中是否token 判断是否登录
    if (localStorage.getItem('token')) {
      next()
    } else {
      next({

        path: '/login',
        query: { redirect: to.fullPath } // 第一个参数随意
      }) // 重定向
    }
  } else {
    next() // 函数 继续跳转界面
  }
})
export default router

路由懒加载

发布后的小程序或者网页，所有的js文件合到一个文件中，会导致进界面的时候卡顿，处理方法，对一些路由使用懒加载

{
    path: '/order',
    component: () => import('@/views/Order')
    // 懒加载