vue-router路由的使用

Posted 2020-12-03 chenweichu

1、路由作用

用vue.js + vue-router创建单页面应用。页面不需要刷新就可以页面跳转，提供用户体验。

2、路由配置

new Router({
    routes: [{
            path: ‘/‘, //匹配路径
            name: ‘Hello‘, //路由的别名
            component: Hello //需要加载的组件名
        }, {
            //使用变量名的形式传递参数。例如：/detail/10086
            //在Detail组件中使用{{$router.params.id}}来接收
            path: ‘/detail/:id‘,
            name: ‘Detail‘,
            component: Detail
        }
    ]
})

 3、路由跳转

<router-link :to="{name:‘Detail‘,params:{id:10086}}">详情</router-link>