vue升级路上使用vue路由器教程

在一个用Vue构建的项目中，一个页面由多个组件组成，它通常被做成一个单页应用程序。因此，在跳转页面时，传统的href跟不上时代的步伐，于是vue-router应运而生。

在使用vue-router时，您需要查看是否安装了此依赖项。如果没有，可以用NPM安装vue-Router-S，但是在建设vue项目的时候，可以选择是否安装vue-Router。注意点。

一、路由配置

自动安装的vue-router将在src文件夹中有一个router-index.js文件，用于在index.js中创建一个router对象，介绍所需的组件并配置路径

在创建的路由器对象中，路径配置路由路径，组件配置映射组件

然后将路由器文件引入main.js

在创建的路由器对象中，如果未配置模式，将使用默认的哈希模式，路径将被格式化为#！开始。

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

有关HTML5历史模式的更多信息，您可以自己做决定

第二，嵌套路由

在构建的vue实例中，为了深化项目级别，App.vue仅用作存储组件的容器

它用于渲染通过路线映射的组件。当路径改变时，中的内容也将改变。

上面配置了两条路由。当http://localhost 33608080或http://localhost:8080/index打开时，index.vue组件index.vue是真正的父组件，其他子组件将在index.vue中呈现。

为了在主路由中实现嵌套的次路由，需要修改router-index.js

配置好路由后，添加子路由，在子路由中添加二级路由，可以实现路由嵌套。配置路径时，以“/”开头的嵌套路径将被视为根路径，因此是否在子路由的路径中添加“/”取决于个人需求

第三，使用映射路由

如果只需要跳转到页面，不需要添加认证方式，可以使用来实现导航功能：

router-link class=' item ' to='/index/log in“{ text } }/router-link router-link class=' item ' : to=' { path : URL，query : data } ' { { text } }/router-link将呈现为标记，to将呈现为href。点击后，网址会相应改变

如果使用v-bind指令，还可以跟随变量，用v-for指令呈现路由菜单

如果需要传入不同的参数，可以向路线添加动态参数，并将对象传入。

{path:项。URL，query: {id3360' 007'}}那么您也可以使用$ route.query.id来获取相应的参数

第四，程序化导航

然而，在实际的项目下，有许多链接会在执行跳转之前执行方法来处理数据。这个时候，你可以用这个。$router.push(位置)修改url以完成跳转

//绑定gologinbutton class=' log in ' @ click=' gologin '/button//define gologinmethods : { gologin(){ this。routes.push ('/login')}}，push后面可以跟一个对象或一个字符串：

//把这个串起来。$ router . push('/index ')//object this。$ router . push({ path : '/index ' })//命名路由此。$ router.push ({name:' login '，params: { userid33330 }