vue-router使用步骤,vue router教程
本文主要介绍Vue路由器的安装和使用分析，并通过实例代码进行详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
对于单页应用，官方提供vue-router处理路由跳转，本文主要基于其官方文档撰写。
安装
基于传统，我更喜欢以npm包的形式安装。
npm安装vue-路由器-保存
当然官方采用多种方式安装，包括bower，cdn等。
基本用法
要在HTML文档中使用它，您只需要使用指令v-link，例如：
a v-link={path: /view-a} 转到view-a/a
Ps: v-link还支持activeClass来指定链接活动时的css样式。当replace属性为true时，链接跳转时不会留下历史记录。
要在ES5中使用它，您需要首先创建一个路由器实例，然后传入配置参数，例如：
var router=new vue router()；
router.map({
/view-a :
组件：视图a
},
/view-b :
组件：视图b
}
});
router.start(App， # App )；
上面定义的路由器规则被映射到一个组件，最后，当应用程序启动时，它们被挂载到#app的元素上。
当然，如果你想使用ES6的语法进行配置，也很容易做到：
首先建立一个路由器模块，主要用来配置和绑定相关信息。
从“Vue”导入Vue；
从“vue-router”导入VueRouter
vue . use(vue router)；
const router=new vue router()；//这里你可以拥有路由器的配置参数
router.map({
/view-a :
组件：视图a
},
/view-b :
组件：视图b
}
});
导出默认路由器；//导出路由器
在app.js门户启动文件中启用路由器。
从“Vue”导入Vue；
从导入路由器。/路由器；
router.start(App， # App )；
嵌套路由
如果要使用嵌套路由，如/a/b，可以更新路由配置。
router.map({
/a: {
成分：A，
子路由：{
/b: {
构成部分：B
}
}
}
});
同时，您需要在组件A和组件B中使用router-view，例如：
div id=应用程序
路由器视图/路由器视图
/div
组件a，使用嵌套外链。
div id=A
氕
这是组件A
/h1
路由器视图/路由器视图
/div
路由器将自动呈现相应的组件并更新路由信息。
Router-view可以转移道具，支持v-ref，还可以使用v-transition和transition-mode实现场景切换效果。呈现的组件将在此上注册。父组件的$ object。
路由对象和路由匹配
route对象，即$router，将被注入到每个组件中，它可以用来获取一些信息。诸如
属性
解释
$route.path
当前路由对象的路径，如“/view/a”
$rotue.params
关于动态片段的键值对信息(比如/user/:username)，比如{username: paolino}
$route.query
请求参数，比如/foo？User=1得到查询。user=1
$route.router
关于路由器及其组件的信息。
$route.matched
一个数组，包含与当前匹配路径中包含的所有片段相对应的配置参数对象。
$route.name
当前路径名
当然，当您定义自己的路由规则(map)时，您还可以为特殊目的定制字段。
完全匹配片段的语法是使用通配符*例如/user/*any将匹配任何以/user开头的路径，并将属性any赋给params对象。
动态片段的语法是用：作为标志。
使用路径名称
定义路径规则时，如果提供了name属性，以后使用时可以直接引用这个路径规则。
router.map({
/user/:userId: {
姓名：用户，
组件：{.}
}
});
用于v-link
a v-link={name: user ，params: {userId: 1} 这是一个Id为1/a的用户
您也可以使用router.go()
router.go({name: user ，params:{ userId:1 } })；
最终将匹配到/user/1的路径。
路由选项
路由选项名称
系统默认值
功能
哈什邦
真实的
将路径格式化为#！开始
历史
错误的
启用HTML5历史模式，可以使用pushState和replaceState管理记录。
摘要
错误的
使用独立于浏览器的浏览历史虚拟管理后端。
空载运输
错误的
初始加载是否启用场景切换？
savescrollsposition
错误的
它在启用html5历史模式时生效，用于在返回时记住上一个滚动条位置。
linkActiveClass
“v-link-active”
单击链接时需要添加到v-link元素中的类，默认情况下它是活动的。
例如，如果我想使用启用了路径格式化和Html5历史记录的路由器，您可以在路由器初始化时指定这些参数：
var router=new VueRouter({
哈什邦：没错，
历史：真实
});
这里只是简单介绍一下。更多选项，请参考http://router.vuejs.org/zh-cn/.官方文件
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。