18. vue-router案例-tabBar导航 (4)

当我们的路径很多的时候, 比如上面我们抽象组件时候, 就发现, 文件位置换了, 很多路径都要跟着变. 在vue中可以设置路径的别名, 这样我们就不用在更换了文件位置以后更换路径了.
在build/webpack.base.conf.js文件中, 有一个resolve选项

resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), } },

extensions: 表示引入路径的时候可以省略扩展名

alias: 表示给路径起一个别名. resolve('src')的含义是给src路径起一个别名.
这样, 我们可以给其他文件夹也起一个别名.

resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'components': resolve('@/components'), 'assets': resolve('@/assets'), 'router': resolve('@/router'), 'views': resolve('@/views') } },

起别名的时候, 比如src/components, 路径就可以使用@/components.
后面使用到这个路径的文件, 直接使用@/components就可以了

在使用的时候, 也分为几种场景

使用import引入组件中的路径

没有import, 比如图片路径

在路由导航中的import 路径

1. 使用import引入组件

我们在App.vue中引入了MainTabBar
之前我们引入脚本是这么写的:

import MainTabBar from "./components/tabBar/MainTabBar";

现在我们配置了路径别名以后, 可以省去前面的./, 直接以components开头

import MainTabBar from "components/tabBar/MainTabBar";

在style样式引用中同样有效

<style> @import "assets/main.css"; </style>

我们直接将./省略.

2. 在图片等非import中引入

比如我们在MainTabBar.vue组件中设置导航图标的时候, 有很多的src, 之前我们都是这么写的

<tab-bar-item path="/profile" activeStyle="purple"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">我的</div>

在定义了路由别名以后, 我们可以使用如下写法:

<tab-bar-item path="/home" activeStyle="blue"> <img slot="item-pic" src="http://www.likecs.com/~assets/img/tabBar/1.jpeg"> <img slot="item-pic-active" src="http://www.likecs.com/~assets/img/tabBar/4.jpeg"> <div slot="item-name">首页</div> </tab-bar-item>

也就是使用别名assets, 但是需要在前面加一个~符合.

3. 路由中的路径

到目前为止, 我发现在路由中引入组件, 不能使用别名, 但是可以使用@符号来代表src

//const Home = () => import('@/views/home/Home') import Home from '@/views/home/Home'; const Cart = () => import('@/views/cart/Cart') const Category = () => import('@/views/category/category') const Profile = () => import('@/views/profile/profile')

一旦使用别名, 就会报错. 无论是到还是不带都不行. 还需要继续探究

这也是一个问题

注意: 当我们修改了配置文件webpack.base.conf.js以后, 要重新启动服务才行. 否则不生效