【学习笔记】Vue Router

简介: 【学习笔记】Vue Router


一、创建 Vue2 项目, 下载 vue-router

npm i -g @vue/cli-init
vue init webpack project_name

二、SPA(单页面富应用)

🍀 Single Page web Application

🍀 整个网站只有个 html 页面

🍀 网站内容依然很丰(在使用者看来依然是很多个页面)

🍀 前端的 vue router 控制前端页面的映射关系(映射关系告诉我们哪个 url 路径对应哪个组件的内容)

  • SPA 前端维护一套路由规则
  • 网页 URL 改变的时候,页面不会进行整体的刷新
  • 如何实现(看下面)

三、hash 和 history(网页 URL 改变的时候页面不进行整体的刷新)

如何实现地址栏 URL 改变的时候页面不进行整体的刷新 ?

(1) URL 的 hash

  • URL 的 hash:也叫做锚点(#),本质上是改变window.location 的 href 属性
  • 可通过直接赋值 location.hash 来改变 href,且页面不会刷新

(2) HTML5 的 history 模式:pushState

🍀 类似数据结构

🍀 history.back() 出栈

🍀 history.pushState() 入栈

🍀 history.replaceState() 把当前页面覆盖掉(无法看到之前的页面)

🍀 history.go() 浏览器地址修改【-1: 上个页面、-2: 倒数第二个页面】

🍀 history.forward() 前进页面

四、vue-router 介绍

  • vue-router 是 Vue.js 官方的路由插件,它和 Vue.js 深度集成,适合用于构建单页面应用
  • 学习网站:https://router.vuejs.org/zh/
  • vue-router 是基于路由和组件的

✏️ 路由用于设定访问路径,把路径和组件映射起来

✏️ 在 vue-router 的单页面应用中,页面路径的改变就是组件之间的切换

五、安装和使用 vue-router

npm install vue-router --save
  • 导入路由对象,并调用 Vue.use(VueRouter)
  • 创建路由实例,传入路由映射配置
  • 在 Vue 实例中挂载创建的路由实例

/router/index.js

import Vue from 'vue' // 用于安装【路由】插件
import Router from 'vue-router' // 导入路由对象
// 安装【路由】插件
Vue.use(Router)
const routes = [ // routes 用于配置路由和组件之间的映射关系
]  
export default new Router({ // 创建并导出路由对象(在 main.js 中导入该路由对象)
  routes
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由对象
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router, // 将路由对象挂载到 Vue 实例中
  render: h => h(App)
})

六、路由和组件的映射

  • ① 创建路由组件(项目所需组件)
  • ② 配置路由映射:组件和路径的映射关系
  • ③ 使用路由:通过 <router-link><router-view>

Home.vue

<template>
    <div id="container">
     
        Home.vue
    
    </div>
</template>
<script>
export default {
    name: "Home",
};
</script>
<style scoped>
#container {
    background: green;
}
</style>

<template>
    <div id="container">
     
        About.vue
    
    </div>
</template>
<script>
export default {
    name: "About",
};
</script>
<style scoped>
#container {
    background: purple;
}
</style>

/router/index.js

import Vue from 'vue' // 用于安装【路由】插件
import Router from 'vue-router' // 导入路由对象
import Home from '../components/Home';
import About from '../components/About';
// 安装【路由】插件
Vue.use(Router)
const routes = [ // routes 用于配置路由和组件之间的映射关系
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
export default new Router({ // 创建并导出路由对象(在 main.js 中导入该路由对象)
  routes
})

main.js

import Vue from 'vue'
import App from './App' // App 组件会被 Vue 实例加载, App 组件中的代码会被解析
import router from './router' // 导入路由对象
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router, // 将路由对象挂载到 Vue 实例中
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <!-- 【route-link】是 vue-router 插件中的组件 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 渲染处理的组件内容所在位置 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style>
</style>

✏️ <router-link> 是 vue-router 中的一个组件,最终会被解析为 <a> 标签

✏️ <router-view> 会根据当前的路径动态渲染出不同的组件

✏️ 网页的其他内容(如 顶部的标题,或底部的版权信息)会和<router-view>

处于同一级

✏️ 路由切换的时候,切换的是 <router-view> 挂载的组件,其他内容不会发生改变

const routes = [ // routes 用于配置路由和组件之间的映射关系
  { // 默认访问的是【Home】组件的内容(路由的默认值)
    path: '',
    redirect: '/home' // 重定向到首页
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

export default new Router({ // 创建并导出路由对象(在 main.js 中导入该路由对象)
  routes,
  mode: 'history' // history 的形式修改浏览器路径
})

七、router-link 的其他属性

tag: 默认 router-link 会被渲染为 <a></a>, 该属性可设定 router-link 被渲染为其他的标签

<template>
  <div id="app">
    <!-- 【route-link】是 vue-router 插件中的组件 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <!-- 渲染处理的组件内容所在位置 -->
    <router-view style="margin: 9px"></router-view>
  </div>
</template>

replace 属性: 不会留下 history 记录,后退键不会返回上一页面


active-class 属性:当<router-link> 对应的路由匹配成功时,会自动给当前元素设置一个名为【router-link-active】的 class(样式) ;该属性可以修改它的默认名称;在进行高亮显示导航菜单或底部 tabbar 的时候,会使用到该属性;一般都是直接使用该类名

<template>
  <div id="app">
    <!-- 【route-link】是 vue-router 插件中的组件 -->
    <router-link  to="/home" tag="button" active-class="active-class" >首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <!-- 渲染处理的组件内容所在位置 -->
    <router-view style="margin: 9px"></router-view>
  </div>
</template>

八、this.$router.push() 路由跳转

<template>
  <div id="app">
    <button @click="clickHome" >首页跳转</button>
    <button @click="clickAbout" >关于跳转</button>
    <router-view style="margin: 9px"></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickHome() {
      this.$router.push('home')
    },
    clickAbout() {
      // this.$router.replace('home')
      this.$router.push('about')
    }
  },
};
</script>

九、动态路由

const routes = [ // routes 用于配置路由和组件之间的映射关系
  { // 默认访问的是【Home】组件的内容(路由的默认值)
    path: '',
    redirect: '/home' // 重定向到首页
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/user/:userId', // 动态路由
    component: User
  }
]
<template>
  <div id="container">
    User.vue
    <div>用户id: {{ $route.params.userId }}</div>
    <div style="margin: 19px; color: orange">用户id: {{ userId }}</div>
  </div>
</template>
<script>
export default {
  name: "User",
  computed: {
    userId() {
      return this.$route.params.userId;
    },
  },
};
</script>
<style scoped>
#container {
  background: yellow;
}
</style>

$route 处于活跃状态的哪个组件

十、路由懒加载

懒加载:用到的时候再加载

打包应用的时候,Javascript 包会变得非常大,进而影响页面加载。如果能够把不同路由对应的组件分割为不同的代码块,当路由被访问的时候才加载对应组件,这样就更加高效了。

import Vue from 'vue'  
import Router from 'vue-router'  
// 路由懒加载
const User = ()=> import('../components/User')
 
Vue.use(Router)
const routes = [
  { 
    path: '',
    redirect: '/home' 
  },
  {
    path: '/home',
    component: ()=> import('../components/Home') // 路由懒加载
  },
  {
    path: '/about',
    component: ()=> import('../components/About') // 路由懒加载
  },
  {
    path: '/user/:userId', // 动态路由
    component: User
  }
]

十一、嵌套路由

嵌套路由是个很常见的功能:

① 在 home 页面中,希望通过 /home/news/home/message 访问不同的内容

② 一个路径映射一个组件,访问两个不同的路径会分别渲染不同的两个组件

实现嵌套路由的两个步骤:

  • 创建对应的子组件,并在路由映射中配置对应的子路由
  • 在组件内部使用 <router-view> 标签

const routes = [ // routes 用于配置路由和组件之间的映射关系
  { // 默认访问的是【Home】组件的内容(路由的默认值)
    path: '',
    redirect: '/home' // 重定向到首页
  },
  {
    path: '/home',
    component: ()=> import('../components/Home'), // 路由懒加载
    children: [ // 子路由/嵌套路由
      {
        path: '/',
        redirect: 'news'
      },
      {
        path: 'news',
        component: ()=> import('../components/HomeNews')
      },
      {
        path: 'message',
        component: ()=> import('../components/HomeMessage')
      }
    ]
  },
  {
    path: '/about',
    component: ()=> import('../components/About') // 路由懒加载
  },
  {
    path: '/user/:userId', // 动态路由
    component: User
  }
]
<template>
    <div id="container">
     
        Home.vue
        <router-link to="/home/news">新闻</router-link>
        <button @click="clickMessage">消息</button>
        <router-view></router-view>
    
    </div>
</template>
<script>
export default {
    name: "Home",
    methods: {
        clickMessage() {
            this.$router.push("/home/message")
        }
    },
}
</script>

十二、路由传参


  • 配置路由格式:【/router/:id】
  • 传递方式:【在 path 后面跟上对应的值】
  • 创建后形成的路径格式:【/router/11、/router/256】


  • 配置路由格式:/router(普通配置)
  • 传递方式:对象中使用 query 的 key 传递参数
  • 传递后形成的路径:/router?id=11、/router?id=256

<template>
  <div id="app">
    <button @click="clickProfile" >我的1</button> 
    <router-link :to="{path: '/profile', query: {
      name: '杨天荣',
      gender: '男'
    }}" >我的2</router-link> 
    
    <router-view style="margin: 9px"></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickProfile() {
      this.$router.push({path: '/profile/', query: {
        name: 'ytr',
        sex: 'boy',
        age: 6
      }})
    }
  },
};
</script>

<template>
  <div id="container">
    Profile.vue
    <div>
      {{ $route.query }}
    </div>
    <ul>
      <li>{{ userInfo }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Profile",
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.userInfo = this.$route.query;
  },
};
</script>

十三、vue-router 导航守卫

导航守卫:监听路由之间的跳转

import Vue from 'vue' // 用于安装【路由】插件
import Router from 'vue-router' // 导入路由对象
// 路由懒加载
const User = () => import('../components/User')
// 安装【路由】插件
Vue.use(Router)
const routes = [ // routes 用于配置路由和组件之间的映射关系
  { // 默认访问的是【Home】组件的内容(路由的默认值)
    path: '',
    redirect: '/home' // 重定向到首页
  },
  {
    path: '/home',
    component: () => import('../components/Home'), // 路由懒加载
    meta: {
      title: '首页'
    },
    children: [ // 子路由/嵌套路由
      {
        path: '/',
        redirect: 'news'
      },
      {
        path: 'news',
        component: () => import('../components/HomeNews')
      },
      {
        path: 'message',
        component: () => import('../components/HomeMessage')
      }
    ]
  },
  {
    path: '/about',
    meta: {
      title: '关于'
    },
    component: () => import('../components/About') // 路由懒加载
  },
  {
    path: '/user/:userId', // 动态路由
    meta: {
      title: '用户'
    },
    component: User
  },
  {
    path: '/profile',
    meta: {
      title: '我的'
    },
    component: () => import('../components/Profile')
  }
]
const router = new Router({ // 创建并导出路由对象(在 main.js 中导入该路由对象)
  routes,
  mode: 'history' // history 的形式修改浏览器路径
})
/**
 * from: 从哪个组件(路由)来
 * to: 到哪个组件(路由)去
 * next: 执行下一步(必须调用一次, 否则路由不会往下执行)
 */
router.beforeEach((to, from, next) => {
  // 当切换组件的时候, 修改页面标题
  window.document.title = to.matched[0].meta.title
  next()
})
export default router

  • 后置钩子(afterEach)不需要调用 next()
  • 上面使用的导航守卫是全局守卫

路由独享的守卫

组件内的守卫

十四、keep-alive

  • router-viewvue-router 的组件,若被直接包含在 <keep-alive> 中,则路径匹配到的试图组件会被缓存
  • keep-aliveVue 内置的组件,可以使被包含的组件保留状态,避免重复渲染

keep-alive的两个属性:

  • include: 字符串或正则,只有匹配的组件会被缓存
  • exclude:字符串或正则,任何匹配的组件都不会被缓存
相关文章
|
1天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能:VS Code或WebStorm作为代码编辑器,Node.js与npm管理依赖,Git操作仓库。基础包括JavaScript、ES6+语法、前端知识(HTML/CSS/浏览器原理)及Vue基础知识。进阶则需源码阅读理解能力,调试技巧,熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
17 8
|
1天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript(ES6+)和前端工程化。从源码入口文件开始,研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理,实践编写Vue插件,参与开源项目,阅读相关文章教程,持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
7 1
|
1天前
|
JavaScript 前端开发
鼠标监视 | 拖拽方块 | Vue
鼠标监视 | 拖拽方块 | Vue
5 0
|
1天前
|
JavaScript
Vue控制是否禁用disabled属性
Vue控制是否禁用disabled属性
7 1
|
1天前
|
JavaScript 前端开发
Vue鼠标悬浮切换图片
Vue鼠标悬浮切换图片
7 0
|
2天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
2天前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
|
4天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
10 0
|
4天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
12 0
|
4天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
7 0