Vue可以实现一种类是ajax不刷新但是切换界面 然后 只是在你的url中的当前地址后面追加信息

首先你要先当如这个路由的模块：

 

 

路由的导入要尤记住几点;

div中的  路由的入口和路由的出口不可忘家
      
        这个是入口
       这个是出口script    中你要设置你的路由的信息  path和要渲染的内容  然后把这些 赋值给你的路由对象中的 routes  然后你的这个对象要赋值给vue实例中的router

 

代码：

      
    
           
       
        index
           
       
        home
           
       
    
           
       
      
    
          
               
      

 

 

 

我们也可以用到类似于其他语言的框架的url匹配  很多语言利用re正则来匹配 ，我们的vue也创建了模糊匹配 ，这样我们就可以用的时候，  只需要选择自己选择的就可以匹配到了相应的url

 

模糊匹配 我们需要在path中调整，用：来进行模糊匹配：

path:'/index/:name',  //  这个是利用模糊匹配  利用： 来设置模糊匹配

 

 

我们可以利用特定的 语法来获取我们的url中的内容

$route.params.name   获取你上面的设置的path中的index后面的name的语法  只要是post的都可以这样获取

 

 

在url中输入的就是get请求的我们可以这样获取

$route.query.age   获取你在url上输入的age的值$route.query.hobby   获取你在url上输入的hobby的值

 

 

    
              
      
        
       
        老王
               
       
        老李
               
           
      
    
          
               
          

 

 

路由参数：

路由的参数            1. path: '/user/:name' --> 匹配路由            $route.params.name     --> 取值                        2. /user/alex?age=9000 --> url中携带参数            $route.query.age       --> 取出url的参数

 

 

 

 

子路由：

我们还可以设置子路由：就是给我们已经设置的路由在添加路由，这个时候你要想想怎么添加路由

我们可以在渲染父路由的时候  渲染子路由

 

就是在以前的路由的component的template中把自路由渲染进去

path:'/index/:name',                component:{                    template:                        `                        
     
                            
      
这是{
   { $route.params.name }}的界面
                            
      
{
   { $route.query.age }}
                            
      
{
   { $route.query.hobby }}
                            
      
                            
      
       用户信息
       
           把自路由添加进去 append                            
                                
       
      
     
                    `                },

然后再用children给设置子路由

 

    
             
     
        
      
       老王
              
      
       老李