> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/vue-route/01-qi-bu.md).

# 路由

vue-route 官方文档(<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属性就可以实现三个子路由的分配
  ```