路由

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

*安装

npm i vue-router -s

1.前端路由

使用哈希进行跳转

www.github.com#/login

基本使用 router-view

• 定义路由对象

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

      const User = {
        template: '<div>User</div>'
      }
      const router = new VueRouter({
        routes: [
      { path: '/user', component: User }
        ]
      })

• Vue实例挂载路由对象

      var app=new Vue({
          el:"#app",
          data:{
              a:"aaa"
          },
          router:router
      })

• 在html中指定显示的位置

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

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

`</router-link>

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

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

动态的获取路由中的内容

• 获取下一级链接

  在定义路由时留下一个空位 path: /route/:sdadsa 在组件中使用该字符$route.params.sdadsa

• 获取get参数，相比前面的就更简单了，之间使用route属性中的query就可以了

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

使用嵌套路由

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

• 当访问 / 时提供<router-view>渲染User内容

• 在User组件模板中继续渲染下级路由组件

  template: `<div>HOME
            <router-link to="/account/login">deng</router-link>
          <router-link to="/account/register">register</router-link>
          <router-view></router-view>
          </div>`

• 在路由中声明下级路由的路径和组件

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

命名视图

• 例如实现经典的布局

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