这篇文章主要介绍了某视频剪辑软件开发之路由配置方法，结合实例形式详细分析了了vue。j路由原理、配置方法及相关操作注意事项，需要的朋友可以参考下
本文实例讲述了某视频剪辑软件开发之路由配置方法。分享给大家供大家参考，具体如下：
概要
用vue。js vue-路由器创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把某视频剪辑软件路由器添加进来，我们需要做的是，将组件（组件)映射到路由（路线),然后告诉某视频剪辑软件路由器在哪里渲染它们。
实现代码
1.在main.js 中引入 router.3
从'导入路由器。/路由器/索引'
2.在main.js 中使用router
global.globalVm=new Vue({
埃尔：' #app '，
路由器，
渲染：函数(h) {
返回h(App)；
},
店，
观察：{
$route(目的地，出发地){
globalVm .$ dialog。正在加载。close()；
curPath=to.name
}
}
});
这里导入了路由器配置，页面使用这个路由进行页面切换。
3. 组件渲染的位置。
我们可以看到App.vue组件，页面组件渲染到路由器视图/路由器视图标签中。
模板
div id='应用程序'
过渡：name='direction '
点火电极
router-view:Resize=' Resize ' v-if=' $ route。meta。keepalive '/路由器视图
/保持活力
/过渡
过渡：name='direction '
路由器视图：resize='Resize' v-if='！$ route。meta。keepalive '/路由器视图
/过渡
正在加载v-model='正在加载String='加载中/加载
/div
/模板
路由器视图这个是某视频剪辑软件组件渲染的地方。
4.组件路由配置
索引。射流研究…配置如下：
导出默认新路由器({
路线：[
{
路径："/登录"，
名称：'登录，
组件：登录，
元：{
图层：0
}
},
{
路径："/",
名称：'根，
重定向："/index "，
元：{
层：1
}
},
{
路径："/myToDo "，
名称：'我的待办事项，
component:resolve=require([' @/components/BPM/my todo ']，resolve)，
元：{
层：2
}
},
{
路径："/我参加的"，
姓名："我的出席”，
component:resolve=require([' @/components/BPM/my attended ']，resolve)，
元：{
层：2
}
},
{
路径："/getInstInfo/:instId/:type "，
名称：' getInstInfo '，
component:resolve=require([' @/components/BPM/GetInstInfo ']，resolve)，
马塔：{
层：3
}
},
4.1 根组件的配置
{
路径："/",
名称：'根，
重定向："/index "，
元：{
层：1
}
小路是浏览器显示的路径。
名称：是组件的命令，我们在流程跳转是，使用名字进行跳转，而不要使用路径跳转，因为路径可以修改，只要名字不做修改，就可以正常工作。
重定向：这里表示直接跳转到/索引组件。
元：这个是可以扩展的属性，我们在这里扩展了一个层属性。
这个属性是用来组件做切换使用的，通过这个层属性，我们可以决定组件的动画。
App.vue文件
4.2 登录组件的配置
从"@/组件/登录"导入登录
{
路径："/登录"，
名称：'登录，
组件：登录，
元：{
图层：0
}
}
组件：登录
引入组件，指定登录组件。
4.3 懒加载组件
当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
{
路径："/myToDo "，
名称：'我的待办事项，
component:resolve=require([' @/components/BPM/my todo ']，resolve)，
元：{
层：2
}
}
component:resolve=require([' @/components/BPM/my todo ']，resolve)，
4.4 组件参数配置
{
路径："/task/:taskId "，
名称："任务",
组件：resolve=require([' @/组件/BPM/任务详细信息']，resolve)，
马塔：{
层：3
}
}
这里我们定义了一个taskId参数。
4.5 组件切换
1.页面中进行切换。
接收列表项目
v-for='列表中的项目'
:key='item.id '
:href='{name:'task '，params:{ taskId:item。id } } ' rel='外部无跟随'
type='link '
' item-a '
在这里，我们可以看到指定了组件的名称，以及参数配置。
router-link :to='{ name: 'user '，params: { userId: 123 }} '用户/路由器-link
2.编程模式被切换。
我们成功保存数据后，需要跳转到提示组件，就可以使用代码了。
router.push({ name: 'user '，params: { userId: 123 }})
4.6 路由HISTORY模式
vue-router默认的hash模式3354使用URL的hash来模拟一个完整的URL，所以当URL改变时，不会重新加载页面。
Url样式是：
http://yoursite.com#/user/1
如果不想要难看的hash，我们可以使用路由的历史模式，这种模式充分利用history.pushState API完成URL跳转，无需重新加载页面。
当你使用历史模式，网址就像一个正常的网址，如http://yoursite.com/user/id,它看起来很好！
希望本文对vue.js的编程有所帮助
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。