Vue-router 路由的基本使用

Vue-router是一个Vue的插件库，专门用于实现SPA应用，也就是整个应用是一个完整的页面，点击页面上的导航不会跳转和刷新页面。

一、安装Vue-router

npm i vue-router        // Vue3安装4版本

npm i vue-router@3    // Vue2安装3版本 

 

二、引入和使用插件

import VueRouter from "vue-router";

Vue.use(VueRouter);

三、编写router配置项

创建一个和main.js平级的文件夹router，再在该文件夹下创建index.js文件用于编写router配置项：

import VueRouter from "vue-router";    // router配置项文件

// 引入需要切换的组件

// 创建并暴露router实例对象

export default new VueRouter({

    routes: [

        {

            path: "/路径名称1",

            component:组件1

        },

        {

            path: "/路径名称2",

            component:组件2

        }

    ]

})

 

router配置完成后，在main.js中进行引入和配置：

四、修改切换按钮

将原来控制导航的按钮切换为如下格式的标签：

       <router-link active-class="选中样式" to="/路径">内容</router-link>

五、指定组件展示位置

在展示组件的地方使用如下标签：

 <router-view></router-view>

 

六、路由的重定向

 我们刚进入网页的时候需要一个默认路径，这时候就可以使用路由的重定向：

{

  path:"*",

  redirect:"/路径名称"

}

例如：我们默认路径是/home 路径

七、注意点 

1. 路由组件我们通常创建一个和main.js平级的文件夹pages，把路由组件放在pages文件夹中，一般组件放在components中。

2. 通过点击切换按钮，当前展示的组件被销毁掉了，需要展示的时候再进行挂载。

3. 配置了router后，每一个组件都有自己的$route属性，存储着自身的路由信息。

4. 整个应用只有一个$router，存储着所有组件和路由的配置信息。

八、补充

（一）缓存路由组件

我们刚才提到我们切换组件就会对组价进行销毁，如果我们想要保留这个组件的信息（如：输入的input框信息），就可以使用该方法。

在使用 router-view 展示该组件的地方添加 keep-alive 标签：

<keep-alive include="组件名">  <router-view></router-view>  </keep-alive>

<keep-alive ：include="[组件1, 组件2]">  <router-view></router-view>  </keep-alive>

第一种用于只需要缓存一个路由组件的情况，第二种写法用于需要缓存多个路由组件的情况。 

（二）路由中的生命周期

actived相当于组件生命周期函数中的mounted生命周期

deactived相当于组件生命周期函数中的beforedestroy生命周期

actived    // 路由组件被激活时触发

deactived    // 路由组件失活时触发

（三）路由的两种工作模式 

路由的工作模式一共有两种：hash模式和history模式

我们可以在创建路由对象的时候对路由的工作模式进行配置，默认是hash模式：

1. hash模式

hash模式下的路径带着 /#

/# 后面的内容不会当做路径传给服务器，有更强的兼容性，不会出现项目部署到服务器上后刷新找不到路径的问题。

2. history模式

history模式下的路径什么就是正常访问网站路径

该模式会出现项目部署到服务器上后刷新找不到路径的问题，一般交由后端工程师来解决。

（四）路由懒加载

当我们把项目写完过后打包出来的JavaScript包会变得非常大，会影响性能。

如果把不同的组件分割成不同的代码块，当路由被访问的时候才加载相应组件，这样就会更加高效。

component: ()=> import("组件路径");

 

 注意：我们引入组件的步骤被放到了component配置中，所以不需要再引入组件了。