vue router路由器设置,vue路由配置步骤
本文主要介绍vue-route路由管理的安装和配置。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
介绍
Erouter是Vue.js的官方路线管理器.它与Vue.js的核心深度集成，可以轻松构建单页面应用。包括的功能有：
嵌套的路线/视图表
基于组件的模块化路由配置
路由参数、查询、通配符
基于Vue.js转场系统的视图转场效果
细粒度导航控件
带有自动激活的CSS类的链接。
5 HTML5历史模式或哈希模式，在IE9中自动降级
自定义滚动条行为
安装
安装命令
npm安装vue-路由器-保存
如果在模块化项目中使用它，必须通过Vue.use()显式安装路由功能：
从“vue”导入Vue
从“vue路由器”导入vue路由器
Vue.use(VueRouter)
模块化使用
当我们之前使用scaffolding vue-cli创建项目时，路由器实际上是经过配置的。创建项目后，项目的根目录下会有一个router文件夹，router下会有一个index.js文件，内容如下：
从“Vue”导入Vue；
从“vue-router”导入VueRouter
从以下位置导入主页./views/home . vue ；
//1.当我们使用其他插件时，必须使用Vue.use来安装插件。
vue . use(vue router)；
//2.定义路由，每个路由应该映射一个组件。
常量路由=[
{
路径：“/”，
姓名：家，
成分：家，
},
{
路径：“/about”，
名称：“关于”，
组件：关于
},
];
//3.创建路由器实例
const router=new VueRouter({
//配置路由和组件之间的应用关系
Routes，//(缩写)相当于routes: routes
});
//4.导出路由器对象，然后在main.js中引用它
导出默认路由器；
这个文件是专门为路由配置的。最后，路由器对象导出后，我们可以在项目的main.js中引用它。
从“Vue”导入Vue；
从导入应用程序。/app . vue ；
从导入路由器。/router ；
vue . config . production tip=false；
新Vue({
Router，//在vue实例中添加一个router对象，可以使用路由。
render: (h)=h(App)，
}).$ mount( # app )；
我们关于和家的两个组件代码如下：
//About.vue
模板
div class="关于"
h1关于/h1
/div
/模板
脚本
导出默认值{
名称：“关于”
}
/脚本
样式范围
/风格
//Home.vue
模板
div class=home
h1主页/h1
/div
/模板
脚本
导出默认值{
姓名：家，
};
/脚本
样式范围
/风格
最后，在App.vue中，我们编写以下代码：
模板
div id=应用程序
路由器链接到=/主页/路由器链接
Router-link to=/about 关于/router-link
路由器视图/路由器视图
/div
/模板
样式lang=scss
/风格
使用router-link加载链接，然后使用指示跳转的链接。Router-link最终将呈现为A标记。Router-view是路由的出口，也就是对应url下的代码会渲染到这个地方。
HTML5 history模式
但是当我们启动程序并访问页面时，#
这是因为vue-router默认哈希模式3354使用URL的哈希来模拟一个完整的URL，所以当URL改变时，不会重新加载页面。
如果不想要难看的hash，我们可以使用路由的历史模式，这种模式充分利用history.pushState API完成URL跳转，无需重新加载页面。
const router=new VueRouter({
模式：“历史”，
路线：[.]
})
我们只需要将模式添加到路由器文件夹下的index.js中，然后再次访问，http://localhost:8080/就不会有#号了。
注意：历史模式也需要后台配置支持。因为我们的应用是一个单页面的客户端应用，如果后台没有正确的配置，用户在浏览器中直接访问其他url地址时，会返回404，不好看。
因此，您应该添加一个覆盖服务器上所有情况的候选资源：如果URL不匹配任何静态资源，您应该返回到同一个index.html页面，这是您的应用程序所依赖的页面。
关于vue-route路由管理的安装和配置的这篇文章到此结束。有关vue route的安装和配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。