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

嵌套路由

其实很简单，主要是vue2.0有一些变更。

所以要多看API文档，少看网上的教程 = =

配置路由

配置路由，这里为Home配置了两个子路由news和message

const routes = [{    path: '/Hello',    component: Hello}, {    path: '/Home',    component: Home,    children: [{        path: 'news',        component: News    }, {        path: 'message',        component: Message    }]}, {    path: '/About',    component: About}];

路由的使用

写在Home.vue中，其实跟app.vue一样。

效果预览

/home

点击message后，显示在home的router-view中

命名路由

有时候觉得在

   
    News
   

中写一大堆的“/Home/news”这种长长的路由确实很麻烦，那么解决方法来了

通过指定路由一个名字，比如这样 name: ‘detail’ 那么访问的时候就可以

```
   
    News
   

的时候就可以写成

   
    News
   

动态路由

所谓动态路由就是，在访问某个页面的时候后面带参数

比如 这样的一个访问 后面的03就是跟的参数。 我们希望可以在detail页面可以获取这个参数，vue-router给了我们一个很好的方法。 通过 $route.params.id 就可以获取。

那么这个id是怎么传过去的呢，看一下代码

没错这里，指定了路由路径和参数params

之前写的rooter-link 中的to是写死的，所以不需要动态绑定，这里的to前面写了:to ，道理跟绑定value一样

   
    {
   {
   news.title}}
   

另外看一下官方的说明

声明式	编程式
router-link :to=”…”	router.push(…)

to其实是router.push的语法糖

router.push提供了以下的方法：

// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: 123 }})// 带查询参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

好了，话不多说，看一下效果

这是newsDetail文件

运行效果

成功显示了我们传入的参数。

路由也可以配置查询参数

{
   { news.title }}

我们在app.vue中写了一个模块，用于显示当前路径，参数，路由名称，查询对象

   
      
    
        
     
          
      
当前路径：{
   {$route.path}}
          
      
当前参数：{
   {$route.params | json}}
          
      
路由名称：{
   {$route.name}}
          
      
路由查询参数：{
   {$route.query | json}}
        
     
      
    
    
   

测试效果，是不是很棒！！

至此，vue-router的基本功能就算学习完了。

参考

不过这篇文章是基于vue1.x版本的，所以着实遇到了很多坑啊。