vue 开发之路由配置方法详解

2023-08-05 03:06:04 247

本文实例讲述了vue开发之路由配置方法。分享给大家供大家参考，具体如下：

概要

用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。

实现代码

1.在main.js中引入router.3

importrouterfrom'./router/index'

2.在main.js中使用router

global.globalVm=newVue({
el:'#app',
router,
render:function(h){
returnh(App);
},
store,
watch:{
'$route'(to,from){
globalVm.$dialog.loading.close();
curPath=to.name;
}
}
});

这里导入了router配置,页面使用这个路由进行页面切换。

3.组件渲染的位置。

我们可以看到App.vue组件，页面组件渲染到标签中。

router-view这个是vue组件渲染的地方。

4.组件路由配置

index.js配置如下：

exportdefaultnewRouter({
routes:[
{
path:'/login',
name:'login',
component:Login,
meta:{
layer:0
}
},
{
path:'/',
name:'root',
redirect:"/index",
meta:{
layer:1
}
},
{
path:'/myToDo',
name:'myToDo',
component:resolve=>require(['@/components/bpm/MyToDo'],resolve),
meta:{
layer:2
}
},
{
path:'/MyAttend',
name:'myAttend',
component:resolve=>require(['@/components/bpm/MyAttend'],resolve),
meta:{
layer:2
}
},
{
path:'/getInstInfo/:instId/:type',
name:'getInstInfo',
component:resolve=>require(['@/components/bpm/GetInstInfo'],resolve),
mata:{
layer:3
}
},

4.1根组件的配置

{
path:'/',
name:'root',
redirect:"/index",
meta:{
layer:1
}

path是浏览器显示的路径。
name：是组件的命令，我们在流程跳转是，使用name进行跳转，而不要使用路径跳转，因为路径可以修改，只要name不做修改，就可以正常工作。
redirect:这里表示直接跳转到/index组件。
meta：这个是可以扩展的属性，我们在这里扩展了一个layer属性。

这个属性是用来组件做切换使用的，通过这个layer属性，我们可以决定组件的动画。

App.vue文件

4.2登录组件的配置

importLoginfrom'@/components/Login'

{
path:'/login',
name:'login',
component:Login,
meta:{
layer:0
}
}

component:Login

引入组件，指定登录组件。

4.3懒加载组件

当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

{
path:'/myToDo',
name:'myToDo',
component:resolve=>require(['@/components/bpm/MyToDo'],resolve),
meta:{
layer:2
}
}

component:resolve=>require(['@/components/bpm/MyToDo'],resolve),

4.4组件参数配置

{
path:'/task/:taskId',
name:'task',
component:resolve=>require(['@/components/bpm/TaskDetail'],resolve),
mata:{
layer:3
}
}

这里我们定义了一个taskId参数。

4.5组件切换

1.页面中进行切换。

这里我们可以看到，指定了组件的名称，还有参数配置。

User

2.编程方式进行切换。

我们在保存数据成功后，需要跳转到提示组件，我们可以使用一下代码。

router.push({name:'user',params:{userId:123}})

4.6路由HISTORY模式

vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

url路径样式为：

http://yoursite.com#/user/1

如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。

当你使用history模式时，URL就像正常的url，例如http://yoursite.com/user/id，也好看！

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 开发之路由配置方法详解

热门推荐

随机推荐