【Vue3从零开始-第七章】7-2 vue-router路由的理解

2022-09-27 164

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第七章】7-2 vue-router路由的理解

]UWOD(KIB9LJS9~S[T{QHM9.png

开始之前

上一章节中创建项目时候，仅仅是搭建了一个简易的vue项目框架，本章节讲解的vue-router路由的内容需要重新去创建一个项目，在创建项目的时候，把vue-router直接安装进去即可。

~S~LNZQHDN%%`T43@FP9]RU.png

安装到这一步的时候，通过⬇选择Router，然后用 空格键选择，最后回车即可确认了。

Z}2F~PFLQI76O{N6E8%B`WN.png

这一步是询问是否使用history模式创建router，这里我们选择n，就会使用hash模式。

其他的还是一样的直接↩即可完成项目搭建了。

main.js配置

9LVU9IP58Y@SRKC8JR5I0~9.png

在main.js中会发现，创建app实例的时候，还引用了router的插件。

路由是啥？

这时候我们通过npm run serve启动项目之后，在浏览器里面就可以看到路由效果了。

P6~2UN3X)EXJ[BAN5]`]4HL.png

在浏览器中的地址栏里面将运行起来的 URLhttp://localhost:8081复制进去之后会发现，URL后面会多一个 #

多出来的#就是hash路由的模式了。

#后面有一个/就表示这是根路由。

当我们点击 About 的时候，路由地址就会变成/about 的路径。

路由发生变化之后，页面也会随之发生改变。

路由是指根据url的不同，展示不同的内容。

路由配置

👉 打开router目录下的index.js文件

~J$TE5Y$~)M2T92574UK_BR.png

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
复制代码

createRouter表示创建一个路由。

是通过vue-router插件库提供的生成路由的代码。

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
复制代码

在routes数组里面定义了两个对象，里面都是页面所需要的路由项。

path表示URL跳转路径

name表示路由名称

component表示路由访问的组件页面

当我们访问根路由的时候，会去找到HomeView组件，这个组件就是上面通过import引入的。

import HomeView from '../views/HomeView.vue
复制代码

实际访问的组件是在views目录下的HomeView.vue文件。

但是访问/about路由的时候，component后面是一个箭头函数，并且是用import引入的一个vue文件。

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
复制代码

用import方式引入的vue文件是一个异步加载的过程，稍后会详细说明。

组件跳转

打开URL的时候，会先进入根组件，也就是HomeView页面。

$5Q3HT{8@2Q_{6@INZIV@7XE.png$

在HomeView页面中是引用了一个子组件的，上一章节中用过了子组件的内容，所以这里我们把这些不需要的可以删掉。

M5GJJ8A3BL{FG%M7VLJZ2VW.png

这时候刷新浏览器之后就会发现只有一个LOGO显示出来了。

此时点击About链接之后，就会进入到AboutView.vue里面。

90DP}UN921LL$L0XGWLLZYF.png

这个页面的组件中只有This is an about page的内容。

4`2ZE885F6MF1N93C$(]$$F.png

页面上渲染出来的也就是对应的内容

由此可见，还是验证了上面说到的路由原理：路由是指根据url的不同，展示不同的内容。

App组件

👉打开src目录下面的App.vue文件。

%~[3M3GTUQTGGBX]IN_36(I.png

模板标签下面有两个router-link标签，刚好对应了页面上的Home和About链接。

router-link标签是跳转路由的标签，可以理解为HTML中的a标签，但是两者是不一样的。

通过点击router-link标签，它会帮你跳到to指向的路径下面。

router-view标签负责展示当前路由对应的组件内容。

如果此时我们把router-view标签删了，那么页面上就不会显示路由跳转之后渲染出来的组件内容了。

$N}Y~8JGI~T5RL0T{RA_T~XC.png$

新增路由组件

看完上面的内容之后，我们也可以手动尝试添加一个新的路由组件来跳转看看。

EJE1MEG1UVO03~UORC0AEPR.png

首先在views目录下新建一个vue组件，名字可以随意发挥的哦！！

页面上需要渲染的内容也可以随意一点。主要是做一个路由跳转示例而已。

{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/LoginView.vue')
}
复制代码

在路由配置页里面就新增一个异步加载组件的方式去写一个配置项。

<router-link to="/login">Login</router-link>
复制代码

在App.vue里面添加一个router-link标签用来跳转到路由组件。

E4UUU`]CI{M{}T%8[)~PXDJ.png

在浏览器中点击Login链接之后，就会渲染出Login组件了。

异步加载路由组件

上面我们说过在路由配置页里面通过import方式引入组件是一种异步加载的方式渲染的，这种效果可以在浏览器控制台中的Network标签页里面看出效果。

$6{%_VT54HI6T)7$5~PG}K3S.png$

打开浏览器时，默认会加载所有的组件和js文件。

当我们点击Login或者About链接时，才会加载出对应的组件内容和js文件。

如果我们把AboutView和LoginView的路由项都配置成HomeView的方式会怎样呢？

import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import LoginView from '../views/LoginView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  }
]
复制代码

AV5O%W6~MHT6$QW~LMQ@1(R.png

这时候就可以很直观的看出来效果了，当我们刷新页面的时候，所有需要的文件都会一次性加载出来，再去点击Login或者About链接时，network里面是不会加载新的js文件了。

异步加载路由是为了在加载首页时，不去加载一些暂时不需要或者不是必要的数据文件。可以让首屏页面打开的更快。

当我们使用异步加载路由的方式时，会在跳转页面的时候才去加载和渲染页面内容，此时如果页面过大加载的文件过多的话，也会导致该页面加载速度缓慢。

在项目中使用路由加载方式时，可以根据需要选用合适的方式去配置。