# Vue-rouer

需要单独安装，不是集成到Vue里的。

npm i vue-routerr
正常的情况下，需要一个routes的配置文件，并且把这个配置文件做为routes参数传入到VueRouter实例化的参数里。 VueRouter的实例又将做为参数传递到最外层的Vue实例的router参数。

// 路由的配置文件
export default [{
path: '',
name: '',
compoents: {
 default: 组件
 anotherView: 组件
}
}]

import Vue from 'Vue'
import VueRouter from 'vue-router'
import routes from 上面的配置文件
export default new VueRouter({
 ……
 routes: 就是上面的路由配置文件
})

import Router from './routes/index'
！！！！！！不能省略index
new Vue({
  ……
  router: 就是上面的VueRouter实例
})

有一个组件叫router-view, 这个组件用于帮路由配置中的组件占位。可以有一个名字，那就对应路由组件里的components, 没有名字的，就对应default 这是最容易忽视的地方
还有一个组件叫router-link，用于跳转，跳转的方式有三种：
- 字符串形式：<router-link to="/">首页</router-link>
- 对象形式:<router-link :to="{ path: 'home' }">Home</router-link>
- 命名路由的方式：<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
只要使用了router, 每个组件上就有一个 $route 和$router ，第一个表示当前路由所对应的所有路由信息。第二个是路由的方法
传递参数的时候要注意，有显式传参和隐式传参

显示传参就是在链接中拼接字符串，同时可一通过query传参以及params传参，query传参不可见，params不可见

<router-link

:to="{ name: 'about',params:{

hzs: '是五去五去五去去'

},query :{

    sss: 'scasqwdw'

}}"

\>to about</router-link>

*   查看传递参数，通过vue在vue实例中`this._routerRoot.$route`查看

    控制台输出样式

image.png

作业: