匹配404错误、嵌套路由、编程式导航

匹配404错误

在路由规则中，* 代表的是任意字符。所以只要在路由的最后添加一个*路由，那么以后没有匹配到的url 都会被导入到这个视图中。

 <div id="app">        
 	<router-view></router-view>   
</div>

<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>    
    var index = Vue.extend({template: "<h1>首页</h1>"})    
    var profile = Vue.extend({template:"<h1>帮助{{$route.params.userid}}</h1></h1>",        
        mounted(){            
            // console.log(this.$route)            
            // console.log(this.$route.params.userid)            
            if(this.$route.params.userid!='123'){                
                this.$router.replace('/404')            
                }       
           }    
     })    
     var notfind = Vue.extend({template: "<p>您要找的页面不存在</p>"})    
     var router= new VueRouter({        
         routes:[            
             {path:"/", component:index},            
             {path:"/profile/:userid", component:profile},            
             {path:"*", component:notfind},            
             {path:"/404",component:notfind}        
             ]    
         })    
      new Vue({        
            el: "#app",        
            router:router,        
            data:{
        
        }    
    })
</script>

嵌套路由

有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问用户的个人中心是 /user/111/profile/ 查看用户发的忒子是 /user/111/posts 等。这时候就需要使用到嵌套路由。

  <link rel="stylesheet" 
 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"></link>

 <div id="app">         
      <nav class="navbar navbar-default">            
          <div class="container-fluid">              
          <!-- Brand and toggle get grouped for better mobile display -->              
          <div class="navbar-header">                
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                  
                 <span class="sr-only">Toggle navigation</span>                  
                 <span class="icon-bar"></span>                  
                 <span class="icon-bar"></span>                  
                 <span class="icon-bar"></span>               
             </button>                
             <a class="navbar-brand" href="#">首页</a>              
         </div>                        
         <!-- Collect the nav links, forms, and other content for toggling -->              
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                
               <ul class="nav navbar-nav">                  
                  <li class="active">                   
                         <router-link to="/">首页</router-link>                
                  </li>                 
                   
                   <li>                    
                       <router-link to="/user/123">个人中心</router-link></router-link>                
                     </li>                  
                     <!-- <li class="dropdown">                   
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>                    
                      <ul class="dropdown-menu">                      <li><a href="#">Action</a></li>                      
                        <li><a href="#">Another action</a></li>                      <li><a href="#">Something else here</a></li>                      
                        <li role="separator" class="divider"></li>                      
                        <li><a href="#">Separated link</a></li>                      <li role="separator" class="divider"></li>                      
                        <li><a href="#">One more separated link</a></li>                    
                      </ul>                  
                      </li> -->                
                      </ul>                
                      <!-- <form class="navbar-form navbar-left">                  
              <div class="form-group">                    <input type="text" class="form-control" placeholder="Search">                  
              </div>                  
               <button type="submit" class="btn btn-default">Submit</button>                </form> -->                
               <!-- <ul class="nav navbar-nav navbar-right">                  
               <li><a href="#">Link</a></li>                  
               <li class="dropdown">                    
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>                    
               <ul class="dropdown-menu">                      
               <li><a href="#">Action</a></li>                      
               <li><a href="#">Another action</a></li>                      
               <li><a href="#">Something else here</a></li>                      
               <li role="separator" class="divider"></li>                      
               <li><a href="#">Separated link</a></li>                    
               </ul>                  
               </li>                
               </ul> -->              
        </div><!-- /.navbar-collapse -->            
        </div><!-- /.container-fluid -->          </nav>          <
              div class="container">                <router-view></router-view>          </div>    
              </div></body></html>

<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script  <script>    
   var index = Vue.extend({template: "<h1>首页</h1>"})       
   var user = Vue.extend({        
                 template:`        
                      <div>        
                        <h1>个人中心</h1>       
                         <ul class="nav nav-tabs">        
                         <li role="presentation" class="active">            
                           <router-link to="/user/123/setting">设置</router-link>        
                        </li>        
                        <li role="presentation">            
                             <router-link to="/user/123/message">消息</router-link>        
                        </li>        
                        </ul>        
                           <div class="container">                
                             <router-view></router-view>          
                           </div>    
                       </div>    
                         `    
                    })    
                   var setting = Vue.extend({template:"<h1>设置</h1></h1>"})   
                   var message = Vue.extend({template:"<h1>消息</h1>"})    
                   var router = new VueRouter({        
                        routes:[            
                          {path: "/", component:index},            {                
                          path:"/user/:userid",                 
                          component:user,                
                          children:[                    
                            // 访问默认页面                    
                              {path:"",component:setting},                    
                              {path:"setting", component:setting},                    
                              {path:"message", component:message},                
                               ]},
       
        ]    
      })    
      new Vue({        
          el:"#app",        
            router:router    
            })
</script>

编程式导航

使用 <router-link>可以在用户点击的情况下进行页面更新。但是有时候我们想要在 js 中手动的修改页面的跳转，这时候就需要使用编程式导航了。
$router.push 跳转：
想要导航到不同的url ，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link : to="..."> 等同于调用 router.push(...)。
声明式：

router-link : to="....."

router.replace(location, onComplere?, onAbort?):

跟router.push很像，唯一不同的是，他不会向history 添加新纪录，而是跟它的方法名一样，替换当前的history。
声明式：<router-link :to="...">

router.go(n): 这个方法的参数是一个整数，意思是在history 记录中向前或向后退多少步，类似于 window.history.go(n）

在浏览器记录中前进一步，等同于 history.forward()

router.go(1)

router.go(-1)后退一步，等同于 history.back()
router.go(-100)如果history记录不够用，显示失败

代码：

<div id="app">        
     <button @click="gotoPost">列表</button>        
     <button @click="gotoProfile">个人中心</button>        
     <button @click="login">登录</button>        
     <button @click="gonext">上一步</button>        
     <button @click="goprev">下一步</button>        
     <router-view></router-view>    
</div>

<script>    
    var post = Vue.extend({template:"<h1>列表</h1>"})    
    var profile= Vue.extend({template:"<h1>个人中心{{$route.params.userid}}</h1>"})    
    var login = Vue.extend({template: "<h1>登录</h1>"})    
    var router = new VueRouter({
        routes: [            
            {path: "/post", component:post},           
            // {path: "/profile/:userid", component:profile},            
            // 第二种方法            
            {path: "/profile/:userid", component:profile, name:"myprofile"},            
            {path: "/login", component:login},        
            ]    
     })
      new Vue({        
          el: "#app",        
          router: router,        
          methods: {
               gotoPost: function(){                
                   this.$router.push("/post")            
                 },            
                 gotoProfile(){                
                       // 第一种方法：                
                       // this.$router.push("/profile/123")                
                       // 第二种方法：显示形式为 profile/123                
                       this.$router.push({name:"myprofile", params:{userid: 123}})            
                       },            
                  login(){                
                       // wd?python query:显示的以问好形式显示                
                       this.$router.push({path:"login", query:{wd: "python"}})           
                        },            
                  gonext(){                
                       this.$router.go(1)            
                   },            
                   goprev(){                
                         this.$router.go(-1)            
                          }        
                   }   
           })
</script>