持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

路由理解的概念

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

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

后端路由：一个接口地址，对应哪一段接口地址

前端路由工作原理

利用url的hash值进行改变和监听，切换对应页面组件的dom结构

前端路由简单实现

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 = () => {
    switch(location.hash) {
      case '#/home':
        this.comName = 'my-home'
        break
      case '#/movie':
        this.comName = 'my-movie'
        break
      case '#/about':
        this.comName = 'my-about'
        break
    }
  }
}

路由-官方路由基本使用

步骤

安装包
配置路由
使用路由

操作

安装 npm i vue-router@3.5.3
创建路由文件 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: [ { path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时， component: Page1 // 装入组件 Page1 }, { path: "/page2", component: Page2 }, { path: "/page3", component: Page3 } ] })

export default router

3.使用路由在main.js中

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

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

使用路由

    <router-view></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配合to, 实现点击切换路由

router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。
如果当前路由被激活会添加特殊的类名：

页面跳转传参

vue路由传参的方式

query传参。适用场景：页面搜索
params传参。适用场景：详情页

query传参与params传参：

1.创建components/MyGoods.vue - 准备接收路由上传递的参数和值

<div>
    你要浏览的商品是: {{ $route.query.name }} {{ $route.params.goodsId}}
</div>

2.路由定义

  {
    path: "/goods",
    component: MyGoods
  },
  {
    path: "/goods/:goodsId",
    component: MyGoods
  },

3.导航跳转, 传值给MyGoods.vue组件

     <li><router-link to="/goods?name=外套">外套</router-link></li>
     <li><router-link to="/goods/123">详情</router-link></li>

query传参

params传参

小结

?key=value ---> 用$route.query.key 取值

/值-需要提前在路由规则/path/:key ---> 用$route.params.key 取值

路由-重定向

在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()

小结

路由嵌套

原理：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
      }
    ]
  }
]

总结：

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

全局前置守卫

目标: 路由跳转之前, 会触发一个函数

语法：router.beforeEach((to, from, next) => {})

实现：

在router/index.js 路由对象上使用固定方法beforeEach

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // to代表要跳转到哪个路径去, to的值是个对象可以打印看到
  // from代表从哪个路径跳过去
  console.log(to);
  console.log(from);

  // fullPath带?后面参数的, path是完整的路径
  console.log("路由要跳转了");

  // 模拟判断登录了没有, 登录后才能去我的音乐
  let loginFlag = false; // 假设false代表未登录
  if (to.path == "/my" && loginFlag == false) {
    // 如果去个人中心页面, 判断未登录, 提示登录(并强制跳转回find)
    alert("请先登录！");
    next("/find");
  } else {
    // 如果不去/my页面就直接跳转
    next();
  }
});

全局后置守卫

目标: 路由跳转后, 触发的函数

语法：router.afterEach((to, from) => {})

使用：

router/index.js - 添加

    router.afterEach((to, form) => {
        console.log(to);
        console.log(form);
        console.log("路由发生了跳转");
    })

路由模式设置

router/index.js

    const router = new VueRouter({
      routes,
      mode: "history" // 打包上线后需要后台支持
    })

history和hash模式对比：

功能一样（跳转页面）
history模式的path路径不带#号，hash有#号
hash模式兼容性好

示例

hash路由例如: http://localhost:8081/#/home

history路由例如: http://localhost:8081/home

我理解的路由