Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为

Vue-router

路由的切换

    
        
        
            
    
        
             
             
             
             
     
      首页
             
     
      列表页
             
     首页2        
     列表页2        
     
{
   {name}}
        
             
         
    
复制代码

vue-router

• Vue Router一共提供了两种传参方式
• 1、query传参 问好传参 路由映射表不用改动 :to={path:"",query:{}} 或者:to{name:"",query:{}}, this.$route.query.XXX
• 2、params传参 路径传参 在映射表中天添加 /:变量 的形式 :to={name:"",params:{变量:""}} this.$route.params.XX

    
        
     
{
   {name}}
        
             
     
      home
             
     
      home
             
     
      list
             
         
    
    let home = {        template:"
首页
",        created(){            let id = this.$route.query.id;        },        mounted() {            console.log(this)        },    }    let list = {        template:"
列表页
"    }    let routes = [        // {        //     path:'/home/:qqq',        //     name:'home123',        //     component:home        // },        {            path:'/home/:qqq/hom2/:www',            name:'home123',            component:home        },        {            path:'/list',            component: list        }    ];    let router = new VueRouter({        routes,        linkActiveClass:'cur'    })    let vm = new Vue({        el:'#app',        router,        data:{            name:"洋"        }    })复制代码

重定向 redirect 路由注册表routes

mode:"history"改变传参的位置隐藏#后面写到路径里面`

    
        
        
            
    
        
     
{
   {name}}
        
     
      首页
             
     
      列表页
             
         
    
复制代码

嵌套使用

    
        
        
            
    
        
     
{
   {name}}
        
         
    
复制代码

导航式传参

• query传参 {path:/son1,query:{a:1,b:2}}} 在每一个组件通过this.router中放的一些方法

• params传参

• 获取在每一个组件的·this.$route.params

• 重定向 :redirect

• 嵌套： children

• 编程式导航 this.$router.push replace() back go push({path:"son1"})

    
    
        
     
{
   {name}}
        
     跳转        
             
     回退        
         
    
复制代码