vue-router相关知识笔记(包括三个生命周期钩子)

目录

路由vue-router

1.简单介绍

2.使用路由

3.嵌套路由（多级路由）

 4.命名路由

5.路由传参

6.props配置项

7.编程式路由导航

8.缓存路由

9.路由重定向

10.路由元信息

11.路由守卫（重点）

---

备注：遗留问题，props中params无法二次渲染（已解决）

路由vue-router

1.简单介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

以上是官方介绍，理解即是一种插件，可以是开发变得更简单，更清晰。应用在单页面开发，是一种极好的技术

2.使用路由

首先直接在项目文件夹根目录启动命令行
使用npm i vue-router安装

这里注意要根据vue的版本安装vue-router，
用过配置文件package.json文件查看vue版本，
vue2版本对应vue-router3，安装时直接

npm install vue-router@3

同理，如果是vue3版本，安装则

npm install vue-router@4

（当然，通过webpack工具生成项目则在生成时候已经配置好路由相关文件）

使用工具生成项目的文件会直接在src下生成路由文件

 

把需要路由的组件成为路由组件，把没有路由的组件成为一般组件， 将需要应用路由的路由组件统一放入到src文件夹的pages文件夹中，

下面是路由文件夹router中index.js文件，即路由器 

使用路由时需要先引入vue，然后引入vue-router插件

在路由器的文件中，我们需要将所有路由的组件都引入进来，进行路由定义

通过插件创建路由器并暴露 

//以下是创建路由器
import Vue from 'vue'
//引入路由插件
import Router from 'vue-router'
//引入路由组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
// 使用路由
Vue.use(Router)
//创建路由器
export default new Router({
  routes: [
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
  ]
})

对路由器进行基本配置后，在入口文件main.js文件中进行引入并注册，找到router文件夹会默认直接读取index.js文件，然后将router配置在vue中，

import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

完成上述操作后，在一个一般组件中放置

<router-link to="/about">Go to About</router-link>

其中的"/about"和路由器中的path属性相匹配，

然后再下方放置路由出口

	 <router-link to="/about">Go to About</router-link>
	 <router-view></router-view>

运行项目

至此路由器基本使用完成 

当点击about的时候，会显示about的内容，此时的home路由组件其实是被销毁的

并且所有的vueComponent上都会有$router和$route属性,$router是不变的，route是不同的每个组件上有不同的route，route中存放当前的挂载地路由组件的信息，而router则是整个路由器和通用的路由方法

3.嵌套路由（多级路由）

多级路由是指当点击一个触发一级路由的元素后，展示一级路由内容时，在一级路由组件内，还有两个路由组件，在这个一级路由组件中，再次设定了点击元素触发二级路由的标签，这就打成了多级路由的效果

示例：

首先在路由组件文件夹内创建两个二级路由，

在路由器index.js文件中配置路由，制定两个二级路由在一级路由组件about中触发

 首先引入两个二级路由组件，然后再一级路由about的配置项中，使用children属性，对两个二级路由进行配置，其中的path属性值不用再添加‘/’符号

import Vue from 'vue'
//引入路由插件
import Router from 'vue-router'
//引入路由组件
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import Nav from '../pages/Nav.vue'
import Tes from '../pages/Tes.vue'
// 使用路由
Vue.use(Router)
//创建路由器
export default new Router({
  routes: [
    //一级路由about
    {
      path: '/about',
      name