• Vue-router

    简介

    是一个vue官方出品的 管理组件切换 的 插件

    • 路由，用来找路。管理路径之间的切换，不同url对应不同的组件
    • 核心思想：在同一个页面根据url进行组件切换，类似动态组件, 最终在 router-view 处出口
    • 路由一般最多3级
    • 版本对应: vue2 对应 v3.x | vue3 对应 v4.x

    区分路由

    前端路由 (hash路由)

    在同一个html页面, 显示不同的内容(组件). 进而建立了URL和组件之间的对应关系

    在同一个页面, 借助锚链接实现同一页面的不同部分的跳转

    第一章: http://localhost:5500/index.html#chap1

    第二章: http://localhost:5500/index.html#chap2

    像#chap1, #chap2...这样的锚链接, 也叫做hash路由 也称为前端路由

    后端路由

    提供接口(数据)服务, 将不同请求方式+url, 映射到处理函数. 建立了URL和处理函数之间的对应关系

    入门案例🟢

    Vue三步

    • 引入vue.js
    • 创建页面容器
    • 实例vue实例

    VueRouter

    • 引入vue-router.js
    • 定义组件对象
    • 定义路由规则routes
      • route: 路由规则, URL和组件的对应关系
      • routes: 由路由规则组成的数组
    • 定义创建路由对象router
      • 用于管理路由规则
    • 挂载router到根实例

    改造html

    • 编写路由链接 router-link
    • 编写路由出口 router-view
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     
    9.     
    10.     
    11.     
    12.     <script src="https://unpkg.com/vue@2">script>
    13.     <script src="https://unpkg.com/vue-router@3">script>
    14.   head>
    15.   <body>
    16.     
    17.     <div id="app">
    18.       
    19.       
    20.  
    21.       
    22.       <router-link to="home" tag="div">首页router-link>
    23.       <router-link to="about">相关router-link>
    24.       <router-view>router-view>
    25.     div>
    26.     
    27.     <script>
    28.       //定义组件对象
    29.       const Home = {
    30.         template: '
      home子组件
      '      ,
    31.       }
    32.       const About = {
    33.         template: '
      about子组件
      '      ,
    34.       }
    35.  
    36.       //3.2 创建路由规则（url -> 组件对应关系）
    37.       const routes = [
    38.         { path: '/home', component: Home },
    39.         { path: '/about', component: About },
    40.       ]
    41.  
    42.       //3.3 创建VueRouter实例（路由器）
    43.       const router = new VueRouter({
    44.         routes: routes,
    45.       })
    46.  
    47.       // 3.4 将路由对象挂载到根实例
    48.       const vm = new Vue({
    49.         el: '#app',
    50.         router: router
    51.       })
    52.     script>
    53.   body>
    54. html>

    集成到项目中

    安装

     npm i vue-router@3

    vue2 安装 vue-router3.x

    vue3 安装 vue-router4.x

    手动集成

    1. 安装
    2. 创建路由文件 src/router/index.js
    3. 在main.js中导入路由对象
    4. 创建页面级路由文件
    5. 编写路由规则
    6. 在app.vue中配置路由出口

    VueRouter

    • 引入
    • 定义组件对象
    • 定义路由规则routes
    • 定义创建路由对象router
    • 挂载router到根实例
    1. //最核心的内容，导出VueRouter对象
    2. import Vue from 'vue'
    3. //1. 导入VueRouter
    4. import VueRouter from 'vue-router'
    5.  
    6. import Home from '../views/Home'
    7. import About from '../views/About'
    8.  
    9. // debugger //在代码中打断点
    10. //安装插件（注册router-view，router-link组件，在 Vue上挂载 $router, $route）
    11. Vue.use(VueRouter)
    12. //2. 创建路由规则
    13. // 页面级组件（大）放到views，公共组件、小组件放到components
    14. const routes = [
    15.   { path: '/home', component: Home },
    16.   { path: '/about', component: About },
    17. ]
    18.  
    19. //3. 创建VueRouter的实例
    20. const router = new VueRouter({
    21.   routes,
    22. })
    23.  
    24. //4. 导出router实例
    25. export default router

    Vue.use(VueRouter)安装插件，在vue-router的install方法中进行：

    在Vue上注册router-view、router-link组件

    在Vue原型对象上挂载了$router $route

    在代码中打断点：debugger

    1. <template>
    2.   <div id="app">
    3.     
    4.     <router-view>router-view>
    5.   div>
    6. template>
    1. // 导入路由对象
    2. import router from './router'
    3.  
    4. new Vue({
    5.   // 挂载
    6.   router,
    7.   render: (h) => h(App),
    8. }).$mount('#app')

    自动集成🟢

    使用@Vue/cli工具创建项目时, 构建项目时直接选择router

    • #/abouthash模式
    • /about history模式（需要？支持）

    1. const routes = [
    2.   //设置一级路由
    3.   //login-登录页
    4.   { path: '/login', component: () => import('@/views/Login') },
    5.   //home-后台首页
    6.   {
    7.     path: '/home',
    8.     component: () => import('@/views/Home'),
    9.     //优化三、设置默认重定向
    10.     redirect: '/home/article',
    11.     children: [
    12.       // 不写/，会跟base路由拼接，最终效果/home/article
    13.       { path: 'about', component: () => import('@/views/About') },
    14.       { path: 'user', component: () => import('@/views/User') },
    15.       // webpack分包机制/ 路由懒加载，常用，异步路由加载
    16.       { path: 'Article', component: () => import('@/views/Article') },
    17.       // 优化一： 提供空的子路由，覆盖路由不匹配的情况
    18.       { path: '', component: () => import('@/views/Article') },
    19.     ],
    20.   },
    21.   // 优化二： 默认路由，*要写在最下面
    22.   { path: '*', component: () => import('@/views/NotFound') },
    23. ]

    案例

    1. <template>
    2.   <div id="app">
    3.     <a href="#/todo">Todo组件a>
    4.     <a href="#/article">Article组件a>
    5.     <div class="page">
    6.       <router-view>router-view>
    7.     div>
    8.   div>
    9. template>
    10.  
    11. <script>
    12.   export default {
    13.     name: 'App',
    14.   }
    15. script>

    $router路由规则与$route路由对象

    路由对象

    $router表示路由对象

    • 包含路由规则对象
    • 操作路由规则对象 (push, replace, go)

    路由规则

    路由对象上的routes数组, 构成了路由规则$route

    • 解析URL

                    参数

                    query

    • 使用其属性

    $route.path 对应 router/index.js中定义的路由规则

    动态路由参数🟢

    获取到user的id //localhost:8080/user?id=3 3

    1. <template>
    2.   <div>
    3.     {{ $route.params.id }}
    4.   div>
    5. template>
    1. methods: {
    2.   handleClick() {
    3.       this.$router.params.id
    4.   },
    5. },

    路由出口 router-link 与 router-view

    • 编写路由链接 router-link
      • 实现组件之间的切换
      • 默认情况, 被渲染为a元素
      • 可通过指定tag属性, 渲染为任意元素
    1. <router-link to="/todo" tag="li">
    2.   显示Todo组件router-link>
    3. <router-link to="/article">
    4.   显示Article组件router-link>
    5.  
    6. <li>显示Todo组件li>
    7. <a href="#/article">显示Article组件a>
    • 编写路由出口 router-view

    一级路由出口

    1. <template>
    2.   <div id="app">
    3.     
    4.  
    5.     
    6.     
    7.     <router-view />
    8.   div>
    9. template>

    二级路由出口

    1. <template>
    2. <div class="home-container">
    3.   <aside>
    4.     <ul>
    5.       <router-link to="/home/user"  tag="li">用户router-link>
    6.       <router-link to="/home/article" tag="li">文章router-link>
    7.     ul>
    8.   aside>
    9.   <main>
    10.     <header>header>
    11.     
    12.     <router-view>router-view>
    13.   main>
    14. div>
    15. template>

    编程式导航🟢

    导航

    ---声明式导航

    router----编程式导航

    vue-router两种方法

    • 使用router-link实现导航
    • 调用$router路由器的方法, 以js代码的方式进行导航

    • push: 会将URL压入到History记录栈中, 可以通过浏览器前进后退按钮进行操作
    • replace: 不会将URL压入到History记录栈中
    • go(n): -1 退回?
    1. <button @click="handleClick">
    2.   导航到Todo组件
    3. button>
    1. methods: {
    2.   handleClick() {
    3.     // 导航到/todo组件
    4.     console.log(this.$route) // 保存当前的URL
    5.     if (this.$route.path != '/todo') {
    6.       this.$router.push('/todo')
    7.     }
    8.   },
    9. },

    应用- 搭建项目框架

    0 需求分析

    /login

    /article

    /user

    分析:

    • /login 登录页面
    • / 后台的首页
      • /user 显示用户管理的页面
      • /article 显示文章管理的页面
    • * 404

    1 搭建环境

    1.1 创建工程

    vue create admin-demo

    选择 Babel 与Router

    1.2 清理文件

    • app.vue
    • src/views
    • src/components
    • src/router/index.js

    2 规划路由

    2.1 编写路由规则, 多级路由🟢

    • 设置一级路由.
    • 配置home对应路由, 设置二级路由
    1. const routes = [
    2.   //设置一级路由
    3.   //login-登录页
    4.   { path: '/login', component: () => import('@/views/Login') },
    5.   //home-后台首页
    6.   {
    7.     path: '/home',
    8.     component: () => import('@/views/Home'),
    9.     //优化三、设置默认重定向
    10.     redirect: '/home/article',
    11.     children: [
    12.       // 嵌套路由不要写 /，否则会匹配到根路由base路由，写/是 /about, 不写是 /home/about
    13.       { path: 'about', component: () => import('@/views/About') },
    14.       { path: 'user', component: () => import('@/views/User') },
    15.       // webpack分包机制/ 路由懒加载，常用，异步路由加载
    16.       { path: 'Article', component: () => import('@/views/Article') },
    17.       // 优化一： 提供空的子路由，覆盖路由不匹配的情况
    18.       { path: '', component: () => import('@/views/Article') },
    19.     ],
    20.   },
    21.   // 优化二： 默认路由，*要写在最下面
    22.   { path: '*', component: () => import('@/views/NotFound') },
    23. ]

    2.2 创建对应的组件文件

    2.3 改造html (设置路由出口)

    • 编写路由链接 router-link
    • 编写路由出口 router-view

    一级路由出口

    1. <template>
    2.   <div id="app">
    3.     
    4.  
    5.     
    6.     
    7.     <router-view />
    8.   div>
    9. template>

    二级路由出口

    1. <template>
    2. <div class="home-container">
    3.   <aside>
    4.     <ul>
    5.       <router-link to="/home/user"  tag="li">用户router-link>
    6.       <router-link to="/home/article" tag="li">文章router-link>
    7.     ul>
    8.   aside>
    9.   <main>
    10.     <header>header>
    11.     
    12.     <router-view>router-view>
    13.   main>
    14. div>
    15. template>
    16.  
    17. <script>
    18. export default {
    19.   name: 'Home',
    20. }
    21. script>

    3 优化

    1：默认路由，* 要写在最下面

    2：默认重定向

    当访问后台首页时, 默认显示某一种信息(通常, 指定一个二级路由)

    3：webpack分包机制/ 路由懒加载，常用，异步路由加载

    4 实现界面

    1. 实现 login 界面
    2. 实现 404 界面
    3. 实现 home 界面
    • 通过编程式的导航进行页面跳转(组件的切换)
    • 通过 动态路由参数(或localStorage) 进行兄弟组件间的带参跳转
    1. 实现 article 与 user 界面

    5 实现菜单点击切换功能

    使用router-link渲染li元素, 使其具体点击切换功能

    1. <template>
    2.   <div class="admin-container">
    3.     <aside>
    4.       <ul>
    5.         <router-link to="/user" tag="li">用户管理router-link>
    6.         <router-link to="/article" tag="li">文章管理router-link>
    7.       ul>
    8.     aside>
    9.     <main>
    10.       <header>header>
    11.       
    12.       <router-view>router-view>
    13.     main>
    14.   div>
    15. template>

    6 导航守卫🟢

    作用:

            校验权限

            守护组件

    扩展:

            jwt，用token来解析身份信息，控制登录

    1. //设置全局前置导航守卫（url切换时执行）
    2. router.beforeEach((to, from, next) => {
    3.   // to：到哪个个path去， from： 从哪个path来
    4.   let isLogin = localStorage.getItem('isLogin')
    5.  
    6.   // 只要用户处于登录状态，直接进入到home首页
    7.   // 如果访问的是'/login'，直接进入/home页
    8.   // 如果访问的不是'/login'，直接调用next() 放行
    9.   if (isLogin) {
    10.     if (to.path == '/login') {
    11.       next('/home')
    12.     } else {
    13.       next()
    14.     }
    15.   } else {
    16.     if (to.path == '/login') {
    17.       next()
    18.     } else {
    19.       // elementUI提供消息提示框
    20.       // $message挂在Vue的原型对象上。Vue的实例可以直接访问，但Vue需要通过prototype访问
    21.       // Message.error('请先登录')
    22.       Vue.prototype.$message({
    23.         message: '请先登录',
    24.         type: 'warning',
    25.         showClose: true,
    26.         duration: 1000,
    27.       })
    28.       // alert('请先登录')
    29.       next('/login')
    30.     }
    31.   }
    32. })
    33. export default router

  • 相关阅读:
    AI辅助研发，引领科技新潮流
    Lactoferrin-PEG-alginate 乳铁蛋白-聚乙二醇-海藻酸钠
    c语言表达式求值--整型提升
    Redis常见场景问题和解决方案
    C++动态库制作
    新手期货开户的时候需要准备什么呢？
    企业数据泄密的场景有哪些？怎样斩断员工泄密风险？
    工业物联网网关助力热力供暖行业实现碳中和
    【算法】Reverse Integer
    48 基于 jdk9 编译的 jdk8 的字节码报错
  • 原文地址：https://blog.csdn.net/weixin_43895819/article/details/127605127