需要单独安装,不是集成到Vue里的。
-
正常的情况下,需要一个routes的配置文件,并且把这个配置文件做为routes参数传入到VueRouter实例化的参数里。 VueRouter的实例又将做为参数传递到最外层的Vue实例的router参数。
// 路由的配置文件 export default [{ path: '', name: '', compoents: { default: 组件 anotherView: 组件 } }]
………… export default new VueRouter({ …… routes: 就是上面的路由配置文件 })
new Vue({ …… router: 就是上面的VueRouter实例 })
有一个组件叫
router-view
, 这个组件用于帮路由配置中的组件占位。可以有一个名字,那就对应路由组件里的components, 没有名字的,就对应default 这是最容易忽视的地方-
还有一个组件叫router-link,用于跳转,跳转的方式有:
<router-link to:'路径'></router-link> <router-link :to:"{ path:'/配置过的路径' }"></router-link> <router-link :to:"{ name:'配置过的名字' }"></router-link>
只要使用了router, 每个组件上就有一个
$route
和$router
, 第一个表示当前路由所对应的所有路由信息。第二个是路由的方法-
传递参数的时候要注意,有显式传参和隐式传参
//使用的path的时候 使用query显示传参 <router-link :to:"{ path:'/配置过的路径',query:{spm: 'sss'}}"></router-link> //使用name的时候 使用params可以进行隐式传参 没配置过的参数就是隐式传参 <router-link :to:"{ name:'配置过的名字',params:{careName:'women',sad:'wd'} }"></router-link>