VUE路由Router嵌套路由和动态路由的实现方式

A.嵌套路由的概念(★★★)

当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最关键的代码在于理解子级路由的概念：
比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:

/login/account
/login/phone

参考代码如下：

var User = { template: "
This is User
" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
    var Login = { template: `

        
This is Login
        

        账号密码登录
        扫码登录
        
        
        
` }

    //定义两个子级路由组件
    var account = { template:"
账号：
密码：
"};
    var phone = { template:"
扫我二维码
"};
    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            { 
                path: "/login", 
                component: Login,
                //通过children属性为/login添加子路由规则
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

页面效果大致如下：

03嵌套路由.png

B.动态路由匹配(★★★)

var User = { template:"
用户：{{$route.params.id}}
"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
        
    ]
})

补充：
如果使用$route.params.id来获取路径传参的数据不够灵活。

1.我们可以通过props来接收参数
var User = { 
  props:["id"],
  template:"
用户：{{id}}
"
  }

var myRouter = new VueRouter({
  //routes是路由规则数组
  routes: [
      //通过/:参数名  的形式传递参数 
      //如果props设置为true，route.params将会被设置为组件属性
      { path: "/user/:id", component: User,props:true },
      
  ]
})

2.还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给
组件进行使用

var User = { 
    props:["username","pwd"],
    template:"
用户：{{username}}---{{pwd}}
"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为对象，则传递的是对象中的数据给组件
        { path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
        
    ]
})

3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为
函数形式。

var User = { 
    props:["username","pwd","id"],
    template:"
用户：{{id}} -> {{username}}---{{pwd}}
"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为函数，则通过函数的第一个参数获取路由对象
        //并可以通过路由对象的params属性获取传递的参数
        //
        { path: "/user/:id", component: User,props:(route)=>{
            return {username:"jack",pwd:123,id:route.params.id}
            } 
        },
        
    ]
})