本文共 1613 字，大约阅读时间需要 5 分钟。

Vue路由传参与布局优化指南

路由传参

路由传参是Vue.js应用中常用的功能，有两种主要方式：url传参和<router-link>标签中的to传参。

url传参

url传参通过在路由路径中添加查询字符串实现。在示例中：

   
    登录
   

可以通过this.$route.query获取传参：

login = {
  template: '
登录页面--{{ this.$route.query.id }}--{{ this.$route.query.name }}
'
}

<router-link>中的to传参

<router-link>标签中的to传参支持query和params两种方式：

query传参

   
    登录
   

可以通过this.$route.query获取：

login = {
  template: '
登录页面--{{ this.$route.query.id }}
'
}

params传参

   
    注册
   

可以通过this.$route.params获取：

register = {
  template: '
注册页面--{{ this.$route.params.name }}
'
}

注意事项

• params传参适合带有动态路由路径的情况，如/login/:id.
• query传参适合固定路径时使用，但会在页面刷新时丢失。

路由嵌套

路由嵌套用于创建可重用和可扩展的路由结构。以下是实现嵌套的示例：

   
  
    
     登录
    
  
    
   
login模板：
```html
   
  
    
这里是登录界面
  
    
     用户信息
    
  
    
   

username子模板：

这里是username

路由配置：

var router = new VueRouter({
  routes: [{
    path: '/login',
    component: login,
    children: [{
      path: 'username',
      component: username
    }]
  }]
});

注意事项

• 模板中必须使用<template>标签包裹路由模板。
• 子路由路径不应以/开头，否则会被视为根路由。

路由命名视图

命名视图用于实现经典布局，例如：

路由配置：

var router = new VueRouter({
  routes: [{
    path: '/',
    components: {
      'header': header,
      'left': left,
      'main': main
    }
  }]
});

注意事项

• 每个<router-view>组件需要指定name属性以显示特定视图。
• 使用components而非component来配置多个视图。

路由重定向

路由重定向用于处理404错误或自定义错误页面。例如：

var router = new VueRouter({
  routes: [{
    path: '*',
    redirect: '/login'
  }]
});

路由激活样式

可以通过linkActiveClass设置链接激活时的样式：

var router = new VueRouter({
  routes: [/* ... */],
  linkActiveClass: 'router-link-active'
});

总结

通过以上方法，可以高效地实现Vue应用的路由传参、嵌套和布局设计。路由嵌套和命名视图是构建复杂应用的重要能力，而路由传参则确保数据在不同组件间的高效传递。