学习Vue-router

趁着放假的时间，继续撸Vue全家桶，感觉很炫酷，和以前用过的系统完全不一样，撸了Vue之后撸一下Vue的路由配置管理工具：Vue-router。
类比Django来学习，在Django中定义路由通常是定义在url.py文件里面，然后在模板中使用{{ url }}的标签，进行路由指定。
而在Vue中主要使用的Vue-router这个插件：
现在主要实现的功能是动态跳转，即url改变，但页面只是部分改变。

# 静态的路由 :


  
    
    
    
  
  
    

        
Hello Vue-router!
        

            twy
            dw
        
        # 路由渲染的内容都是在标签中实现的：
        
    
    
  

动态路由

可以根据不同的path在渲染出不同的内容

  
    
    
    
  
  
    

        
Hello Vue-router!
        

            twy
            dw
        
        
    
    
  

嵌套路由：

在一个被渲染出的组件中，再在这个组件里渲染这个组件里面的路由组件

    
    
    


    

        honda
        toyota
        
        
    
    

    

命名路由

这个功能可以将路由命名

    # 注意命名的位置和格式！
    User
    

const router = new VueRouter({
    routes:[
        {
            path:'/user/:userId',
            # 注意命名的位置和格式
            name:'user',
            component:User
        }
    ]
})

命名视图

有时候我们需要渲染多个视图，这时候我们就需要对每个视图进行命名渲染

# 命名视图和嵌套路由一起使用的例子：

  
Named Views
  

    

        honda
    
    

        toyota
    
    

        home
    
  
  

向路由组件传递props、重定向

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：

// 通过 props 解耦
const Car = {
    props:['name'],
    template:`
        

            
Car {{ name }}
            
            
            
        
    `
}

const router = new VueRouter({

  routes: [
    { path: '/car/:name', component: Car, props:true,

        children:[
            {
                path:'honda',
                components: {
                    default:honda,
                    a:toyota,
                    b:benz
                },
                props:{ default:true,a:false,b:false }
            },
            {
                path:'toyota',
                components: {
                    default:benz,
                    a:toyota,
                    b:honda
                },
                props:{ default:true,a:false,b:false }
            },
            {
                // 定义空路由不渲染子组件
                path:'',
            }
        ]
    },
    // 这里是进行redirect设置：即访问'/a/b'这个路由就会跳转到'/car/brand/honda'下:
    // 访问'/t'这个路由就会跳转到'/a/b'这个路由下，然后在跳转到'/car/brand/honda'下：
    {
        path:'/a/b',redirect:'/car/brand/honda',
        name:'toyota2',
    },
    {  path: '/t', redirect: { name: 'toyota2' }}
  ]
})