2021-03-25

Vue-router:实现url对组件的映射。

一.router文件夹下的index.js

• 引入vue-router模块中的VueRouter函数
• 使用VueRouter即Vue.use(VueRouter)
• 创建VueRouter实例，即new VueRouter()
• 创建路径，路径里面以对象的形式存在

• 把创建好的路由挂载到Vue的下面

二.router的使用

因为router是实现路由和组件之间的映射，所以要分别对两者进行编写，编写完之后还需要进行使用，需要在App.vue中进行使用

(1)路由进行编写

 

(2)建立相应的组件对组件进行编写

(3)使用路由<router-Link>标签进行使用。其中to属性表明路由的路径

<router-review>标签进行占位

三.改变路径的方式

通通过常而言改变路径的方式包含两种，一种是通过hash的方式，另外一种是通过history的方式，不过值得注意的是hash方式改变路由，url地址当中会出现多余的#。通过history的改变路径需要通过在router实例中添加mode:"history"

 

四.动态路由(获取相关的参数值)

(1)修改相关路由中path的值，在path后面加入/:id

(2)对<router-Link>标签进行修改

 

(3)在相应的组件当中引入相应的值

值得注意的是route和router要分开，route表明当前活跃的路由

五.嵌套路由

嵌套路由就是在路由组件当中在嵌套一个路由组件

(1)编写相应的组件

(2)编写相应的路由，由于是嵌套路由，故需要在被嵌套的路由之下编写相应的路由。

(3)使用相应的嵌套组件，由于是嵌套组件，需要在被嵌套的组件里面进行编写，使用<router-Link>和<router-view>

六.导航守卫

导航守卫的作用主要是用来监听组件的进入和离开，在组件进入和离开的时候可以通过beforeEach和afterEach两个函数对监听的组件进行操作。类似于监听器的作用。

全局导航守卫、局部导航守卫、组件导航守卫

例如：组件切换时页面标题的转换

(1)编写全局导航守卫

(2)编写各个组件路由的标签

七.实现路由组件的缓存

<keep-alive>是vue内置的一个组件，把<router-view>包含在里面可以实现组件缓存的保存