vue router路由,vue-router常用的路由模式
本文主要介绍如何使用vue-router路由，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
一.说明
二。装置
三。测试
目录
Erouter是Vue.js的官方路线管理器.它与Vue.js的核心深度集成，可以轻松构建单页面应用。包括的功能有：
嵌套的路线/视图表
基于组件的模块化路由配置
路由参数、查询、通配符
基于Vue js过渡系统的视图过渡效果
细粒度导航控件
带有自动激活的CSS类的链接。
HTML5历史模式或哈希模式，在IE 9中自动降级
自定义滚动行为
一、说明
基于第一个vue-cli的测试学习；首先检查节点模块中是否存在vue-router。
Vue-router是一个插件包，所以我们还是需要使用npm/cnpm来安装。打开命令行工具，输入项目目录，然后输入以下命令。
npm安装vue-路由器-保存-开发
如果在模块化项目中使用它，必须通过Vue.use()显式安装路由功能：
从“vue”导入Vue
从“vue路由器”导入vue路由器
vue . use(vue router)；
二、安装
1.先删掉没用的东西。
2.组件目录存储我们自己的组件。
3.定义Content.vue的组件
模板
差异
H1内容页面/h1
/div
/模板
脚本
导出默认值{
名称：“内容”
}
/脚本
Main.vue组件
模板
差异
H1主页/h1
/div
/模板
脚本
导出默认值{
名称：“主”
}
/脚本
4.安装路线。在src目录下，创建一个新的文件夹：router，专门用于存储路由，配置route index.js如下
从“vue”导入Vue
//导入路由插件
从“vue路由器”导入路由器
//导入上面定义的组件
导入内容自./组件/内容
从以下位置导入主管道./组件/主要
//安装路由
Vue.use(路由器)；
//配置路由
导出默认新路由器({
路线：[
{
//路由路径
路径：“/内容”，
//路由名称
名称：内容，
//跳转到组件
组件：内容
},
{
//路由路径
路径：“/main”，
//路由名称
名称：主，
//跳转到组件
组件：主
}
]
});
5.在main.js中配置路由
从“vue”导入Vue
从导入应用程序。/App
//导入上面创建的路由配置目录
从导入路由器。/router//自动扫描内部的路由配置。
//关闭生产模式下给出的提示。
vue . config . production tip=false；
新Vue({
埃尔： #app ，
//配置路由
路由器，
组件：{App}，
模板：“应用程序/”
});
6.在App.vue中使用路由
模板
div id=应用程序
！-
Router-link:默认会渲染为A标签，to属性是指定的链接。
Router-view:用于呈现路由匹配的组件。
-
路由器链接到=/main 主页/路由器链接
路由器链接到=/content 内容/路由器链接
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
款式/风格
这就是如何使用Vue-router路由的细节。更多关于Vue-router路由使用的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。