路由配置及动态传参

一、路由配置

1、安装vue-router：npm  install  vue-router

2、meta可以设置属性，方便路由守卫使用

3、配置路由/router/index.js

        path

        component

        children

        name

        动态路由配置

        redirect 重定向(设定默认路由)

        router-view

4、路由传参(从list组件跳转到detail组件)

(1) 动态路由,list通过router-link跳转,                                           detail通过$route.params.xxx 接收参数

(2) list通过 $router.push({path:'/detail',query: { filmId:xxx}})        detail通过$route.query.filmId接收

(3) list通过 $router.push({name:'detail',params: { filmId:xxx}})     detail通过$route.params.filmId接收

5、到main.js里设置router

6、router-view 渲染子路由组件

7、使用路由守卫来实现登陆判断和设置页面标题