【学习笔记】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-view 是 vue-router 的组件，若被直接包含在 <keep-alive> 中，则路径匹配到的试图组件会被缓存
keep-alive 是 Vue 内置的组件，可以使被包含的组件保留状态，避免重复渲染

keep-alive的两个属性：

include: 字符串或正则，只有匹配的组件会被缓存
exclude：字符串或正则，任何匹配的组件都不会被缓存

【学习笔记】Vue Router

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

二、SPA（单页面富应用）

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

(1) URL 的 hash

(2) HTML5 的 history 模式：pushState

四、vue-router 介绍

五、安装和使用 vue-router

六、路由和组件的映射

七、router-link 的其他属性

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

九、动态路由

十、路由懒加载

十一、嵌套路由

十二、路由传参

十三、vue-router 导航守卫

十四、keep-alive

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【学习笔记】Vue Router

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

二、SPA（单页面富应用）

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

(1) URL 的 hash

(2) HTML5 的 history 模式：pushState

四、vue-router 介绍

五、安装和使用 vue-router

六、路由和组件的映射

七、router-link 的其他属性

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

九、动态路由

十、路由懒加载

十一、嵌套路由

十二、路由传参

十三、vue-router 导航守卫

十四、keep-alive

热门文章

最新文章

相关课程

相关电子书