言简意赅的vue路由简介

路由

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

---

---

前端路由工作原理

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

路由分为前端路由和后端路由

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

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

---

前端路由简单实现

思路
1. URL 地址栏中的 Hash 值发生了变化
2. 前端js监听了到 Hash 地址的变化 window.onhashchange=()=>{}
3. 前端js把当前 Hash 地址对应的 <component :is="Hash 值对应的组件"></component>组件渲染都浏览器中

一、路由-官方路由基本使用

步骤

1. 安装包npm i vue-router@3.5.3
2. 配置路由

// 导入路由插件
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')

4. 组件中使用路由

<router-view></router-view>

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、声明式导航-router-link

1. 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-active 可以通过vue的调试工具查看a标签的变化

vue路由传参的方式

两种方式：

1. query传参。 适用场景：页面搜索

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

2. params传参。 适用场景：详情页

<li><router-link to="/goods/123">详情</router-link></li>

params传参要配置路由规则

图示-查询字符串

图示-params传参

vue路由接收参数

 $route.query.name ---接收的query方式的参数
 $route.params.goodsId ---接收的params方式的参数

路由-重定向

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

应用场景：改变默认访问页面的行为

配置路由

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

路由404

可以直接在路由规则中配置

 { // 当上面路由都不匹配, 匹配这个通配符, 显示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()

vue路由接收参数

 $route.query.name ---接收的query方式的参数
 $route.params.goodsId ---接收的params方式的参数

三、路由嵌套

原理：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来实现嵌套。