# 路由

vue-route 官方文档([https://router.vuejs.org/zh/](https://router.vuejs.org/zh/))

_\*安装_

`npm i vue-router -s`

## 1.前端路由

使用哈希进行跳转

`www.github.com#/login`

## 基本使用   **router-view**

*   定义路由对象

    路由对象中有一个routes路由数组，内部定义了指向的链接和对应的组件

    ```javascript
        const User = {
          template: '<div>User</div>'
        }
        const router = new VueRouter({
          routes: [
        { path: '/user', component: User }
          ]
        })
    ```
*   Vue实例挂载路由对象

    ```javascript
        var app=new Vue({
            el:"#app",
            data:{
                a:"aaa"
            },
            router:router
        })
    ```
*   在html中指定显示的位置

    ```markup
        <div id="app">
            <router-view></router-view>
        </div>
    ```

## router-link制作点击链接，可以省略#和自带点击事件

\`\</router-link>

## 当登录首页时，进行其它页面的渲染

```javascript
    const router = new VueRouter({
      routes: [
      {path:"",redirect:"/user"},  //访问首页。相当于访问/user
    { path: '/user', component: User }]
    })
```

## 动态的获取路由中的内容

*   获取下一级链接

    在定义路由时留下一个空位 `path: /route/:sdadsa` 在组件中使用该字符`$route.params.sdadsa`
*   获取get参数，相比前面的就更简单了，之间使用route属性中的query就可以了

    ```javascript
    //路由路径
    #/dsadsa?aaa=dsaddas
    console.log(this.$route.query.aaa)
    ```

## 使用嵌套路由

```
/user/profile                     /user/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
```

* 当访问 **/** 时提供`<router-view>`渲染User内容
*   在User组件模板中继续渲染下级路由组件

    ```javascript
    template: `<div>HOME
              <router-link to="/account/login">deng</router-link>
            <router-link to="/account/register">register</router-link>
            <router-view></router-view>
            </div>`
    ```
*   在路由中声明下级路由的路径和组件

    ```javascript
        routes: [
        {
          path:"/User",
          component:HOME,
          children: [
            {
              // 当 /user/login匹配成功，
              // login 会被渲染在 User 的 <router-view> 中
              path: 'login',
              component: login
            },
            {
              path: 'register',
              component: register
            }
          ]}
          ]
    ```

## 命名视图

*   例如实现经典的布局

    ```javascript
    在父组件中注册3个路由视图，同时在父路由中声明多个子路由，在route-view标签上使用name属性就可以实现三个子路由的分配
    ```
