前端路由跳转丢失端口号_路由轻松设置vuerouter（2.2）

最新推荐文章于 2024-07-26 19:20:11 发布

weixin_39625709

最新推荐文章于 2024-07-26 19:20:11 发布

阅读量744

点赞数

文章标签：前端路由跳转丢失端口号

本文链接：https://blog.csdn.net/weixin_39625709/article/details/111374314

版权

上篇我们说了vue项目的目录设计，

本篇我们来学习一下vue路由。

路由的作用

在web端路由(route)就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个route到URL中。

文档地址

vue路由官方文档：

https://router.vuejs.org/zh/guide/#html

安装

通过node.js安装：

1npm install vue-router

但是一般情况下在node中安装vue项目的时候根据提示选择安装vue-router。

如何使用路由？
举个项目例子：

1.添加路由链接，打开Nav.vue

1    "/goods" class="nav-item">点菜</router-link>2    rates" class="nav-item">评价3    /seller" class="nav-item">商家

to是路由指向的地址。

2.决定将组建渲染在哪，

打开App.vue，添加：

3.配置路由，

打开router文件夹下index.js

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3//1.引入各个组件
 4import Goods from '@/components/Goods/Goods'
 5import Rates from '@/components/Rates/Rates'
 6import Seller from '@/components/Seller/Seller'
 7
 8Vue.use(Router)
 9//2.配置路由   路径->组件
10export default new Router({
11  routes: [
12    {
13      path: '/',
14      redirect:'/goods'
15    },
16    {
17      path: '/goods',
18      component: Goods
19    },
20    {
21      path: '/rates',
22      component: Rates
23    },
24    {
25      path: '/seller',
26      component: Seller
27    }
28  ],
29  linkActiveClass:'active'
30})

redirect路由重定向：

我们在router数组设定redirect为“/goods”。那么只要路径是/。页面会跳转到"/goods"页面。

redirect官方文档：

https://cn.vuejs.org/v2/guide/migration-vue-router.html#router-redirect-%E6%9B%BF%E6%8D%A2

注意，当前激活导航设置方法：

1linkActiveClass:'active'

linkActiveClass：固定属性；

‘active’：值。是我们定义的class类；

我们在点击评价时，会得到上图中的效果。

4.路由的keep-alive

针对上图中的业务情况

我们在点菜页面；
点了些食品；
那么现在购物车内会有我们点过的数据；
点击其他页面，数据需要得到保留。

所以使用keep-alive保留组件状态，避免重新渲染，购物车的数据丢失。

1        2            <router-view >router-view>3        keep-alive>

keep-alive官方文档：

https://cn.vuejs.org/v2/api/#keep-alive

总结

我们从安装，到组件配置路由再到使用keep-alive的业务场景复现，让我们对vue的router相关的技术点有了一定了解，我们将一步步完善项目，丰富我们的技术经验。

下篇：

我们通过axios为项目添加数据交互功能，敬请关注。