vueRouter 2.0路由配置

vue-router2.0中的动态路由配置

在实际应用中，通常存在某种模式匹配到的所有路由映射到同个组件上，例如，根据UserID获取User的信息。

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

像/user/foo和/user/bar都映射到相同的路由，路由参数被放置在this.$route.params可以在每个组件内部使用，例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

同样可以设置多个参数

    /user/:username/post/:post_id  //模式，其中:username和:post_id为参数
    /user/evan/post/123  //匹配路径
    { username: 'evan', post_id: 123 } //$route.params，对应的值

嵌套路由配置

嵌套路由，顾名思义是路由中嵌套着路由，简单理解为一个路由对应一个组件，这个组件内部又嵌套了一个组件，那么这个时候，就需要采用嵌套路由才能访问到嵌套的子组件了。

<div id="box">
    <p>
        <router-link to='/user/user_id1'>空路由</router-link>
        <router-link to='/user/user_id1/profile'>profile</router-link>
        <router-link to='/user/user_id1/posts'>posts</router-link>
    </p>
    <router-view></router-view>
</div>

const User={
    template:`
        <div> 
            User.<h1>{{ $route.params.id }}</h1>
            <router-view></router-view> 
        </div>
        `
}

const router=new VueRouter({
    routes:[
        {
            path:'/user/:id',component:User,
            children:[
                {
                    // 默认空路由
                    path:'',
                    component:{
                        template:'<p>this is the boot router</p>'
                    }
                },
                {
                    // 当 /user/:id/profile 匹配成功，
                    // UserProfile 会被渲染在 User 的 <router-view> 中
                    path:'profile',
                    component:{
                        template:'<p>this is the profile</p>'
                    }
                },
                {
                    // 当 /user/:id/posts 匹配成功
                    // UserPosts 会被渲染在 User 的 <router-view> 中
                    path:'posts',
                    component:{
                        template:'<p>this is the posts</p>'
                    }
                }
            ]
        }
    ]
})
var vm=new Vue({
    router
}).$mount('#box');

参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html