Vue.js在实战中利用vue-router实现跳转页面

序

当使用Vue.js作为项目时，一个页面是由多个组件组成的，因此在跳转到一个页面时，传统的href并不适合，于是vue-router应运而生。

正式文件：https://router.vuejs.org/zh-cn/essentials/getting-started.html

本例主要达到如下效果：

项目结构：

1.配置路由器

使用vue-cli创建的初始模板中没有vue路由器，需要通过npm安装

cnpm i vue-router -D安装完成后，在src文件夹中创建一个routers.js文件，与main.js处于同一级别

然后将所需的组件引入router.js并创建routers对象

从导入主页。/components/Home . vue ' const routers=[{ path: '/Home '，name: 'home '，components : Home }，{ path : '/'，components : Home }，]导出创建的routers对象中的默认路由器，path配置路由路径，component配置映射的组件

需要注意的是，导出默认路由器必须写在文件底部，后面要有空行，否则无法通过ESlint语法验证

那么main.js也需要修改：

从“vue”导入Vue从“vue-router”导入VueRouter从“导入routers”。/路由器“从导入应用程序”。/App ' vue . use(vue Router)Const router=new vue router({ mode : ' history '，route : routers })new vue({ El 3360 ' # App '，router，render3360h=h (app)})在创建的router对象中，如果未配置模式，将使用默认的哈希模式。开始。

添加mode: 'history '后，将使用HTML5历史模式，该模式没有#前缀，可以使用pushState和replaceState管理记录。

关于HTML5历史模式的更多信息，请参考官方文档：https://router.vuejs.org/zh-cn/essentials/history-mode.html

第二，嵌套路由

在这个例子中，为了深化项目级别，App.vue只是一个存储组件的容器：

路由器视图用于呈现通过路由映射的组件。当路径改变时，路由器视图中的内容也将改变。

上面配置了两条路由。当http://localhost 33608080或http://localhost:8080/home打开时，home.vue组件将在路由器视图中呈现

Home.vue是一个真正的父组件，像first.vue、login.vue这样的子组件会被渲染到home.vue中的router-view。

因此，有必要在主路由中嵌套辅助路由并修改路由器

从导入主页。/components/home.vue“首先从导入”。/components/children/first.vue“从导入登录”。/components/children/log in . vue ' const routers=[{ path : '/'，components : Home，children 3360[{ path : '/'，components : log in }]}，{ path: '/home '，name: 'home '，components : Home，children 3:[{ path 3: '/'，name: ' login '，components 33: log in }，{ path

配置路径时，以“/”开头的嵌套路径将被视为根路径，因此无需将“/”添加到子路由的路径中。

第三，使用路由器链接来映射路由

home.vue中引入了Header.vue组件，包含导航菜单

当您点击导航菜单时，您将在home.vue中切换路由器视图的内容

在这种情况下，您只需要跳转到页面，而不需要添加身份验证方法，您可以使用路由器链接来实现导航功能：

编译后，路由器链接将呈现为标签，to将呈现为href。当点击路由器链接时，url将相应地改变

如果使用v-bind命令，还可以跟随变量使用v-for命令呈现导航菜单

如果您想使用home组件为所有具有不同id的用户渲染，您可以在路由器中添加动态参数。

{path:'/Home/: id '，component: home}像'/home/user01 '、'/home/user02 '和'/home/user03 '这样的路由将被映射到Home组件

然后还可以使用$route.params.id来获取相应的id

第四，程序化导航

其实有很多按钮在跳转之前会执行一系列的方法。这个时候，你可以用这个。$router.push(位置)修改url并完成跳转

Push后面可以跟一个对象或一个字符串：

//把这个串起来。$ router . push('/home/first ')//object this。$ router . push({ path : '/home/first ' })//名为route this。$ router.push ({name:' home '，params:)

在学习的过程中，遇到了一个由来已久的问题，大概是从第一个组件跳回登录后，就跳不回去了。但是网址已经修改，刷新后的页面可以正常显示。

这是因为我没有在first.vue组件的数据中写入return

在vue组件中，数据必须作为函数写入，返回参数需要return。但是当数据为空时，即使不写return，也不会报错，导致上述问题。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。