Vue-Router2.0教程

vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:

1. 布局
   主页

2. 路由具体写法
   //组件
   var Home={
   template:'

   我是主页

   '
   };
   var News={
   template:'

   我是新闻

   '
   };

   //配置路由
   const routes=[
   {path:'/home', componet:Home},
   {path:'/news', componet:News},
   ];

   //生成路由实例
   const router=new VueRouter({
   routes
   });

   //最后挂到vue上
   new Vue({
   router,
   el:'#box'
   });

3. 重定向
   之前 router.rediect 废弃了
   {path:'*', redirect:'/home'}

---

路由嵌套:
/user/username

const routes=[
    {path:'/home', component:Home},
    {
        path:'/user',
        component:User,
        children:[  //核心
            {path:'username', component:UserDetail}
        ]
    },
    {path:'*', redirect:'/home'}  //404
];

---

/user/strive/age/10 :id:username:age

---

路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

---

    

        

            主页
            新闻
        
        

            
        
    

    

    

        

            主页
            新闻
        
        

            
        
    

    

    

        

            主页
            用户
        
        

            
        
    

    

    

        

            主页
            用户
        
        

            
        
    

    

    

        
        
        

            主页
            用户