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配置中,所以不需要再引入组件了。