day7 路由

概念

• 对于单页面应用程序来说，主要通过URL中hash（#号）来实现不同页面的跳转。
  • hash特点 ：http请求不会包含hash相关内容

安装

• 直接下载/CDN

  • https://unpkg.com/vue-router/dist/vue-router.js
  • vue后加载vue-router，会自动安装
  • 导入包后，url后会自动加#/

  <script src='/path/to/vue.js'></script>
  <script src='/path/to/vue-router.js'></script>
  

• npm

  npm install vue-router -S
  

使用

基本使用

• 当导入vue-router包后，在window全局对象中就有了一个路由构造函数，叫做VueRouter

• 在 new 路由对象时，可以为构造函数传递一个配置对象

• Vue提供一个对象router用于与vue-router建立关系

• Vue-router 参数

  • routes ：路由规则，可以多个，是一个数组
  • path ：表示监听某个路由链接地址
  • component，表示对应匹配组件,必须放一个组件模板对象，不能放一个模板对象引用名称
  • redirect 重定向，经常用于设置默认路由

• Vue-router提供标签

  • router-view 专门用于当作占位符。路由匹配到的组件，将会展示在router-view中
  • router-link 专门用于作为跳转使用
    • to 跳转路由path
    • tag 渲染标签，默认router-link默认渲染成a标签

  <div id="app">
      <router-link to="/login">login</router-link>
      <router-link to="/register">register</router-link>
      <router-view></router-view>
  </div>
  <script>
      let login = {
          template: '<h1>登陆组件</h1>'
      }
      let register = {
          template: '<h1>注册组件</h1>'
      }
      // 实例使用
      const vueRoute = new VueRouter({
          routes: [
              { path: '/login', component: login },
              { path: '/register', component: register }
          ]
      })
      const vm = new Vue({
          el: '#app',
          // 建立关系
          router: vueRoute
      })
  </script>
  

默认路由设置

• 使用redirect属性

   const vueRoute = new VueRouter({
          routes: [
              { path: '/', redirect: '/login' },
              { path: '/login', component: login },
              { path: '/register', component: register }
          ]
      })
  

参数传递

• query

  • 使用route对象中的query对象进行获取

• params

  • 使用params需预先在routes规则中定义
  • 使用route对象中的params对象进行获取

  <div id="app">
          <router-link to="/login?id=10">login</router-link>
          <router-link to="/register/10">register</router-link>
          <router-view></router-view>
  </div>
  <script>
      let login = {
          template: '<h1>登陆组件</h1>',
          created() {
              console.log(this.$route.query)
              //结果为： {’id':10}
          },
      }
      let register = {
          template: '<h1>注册组件</h1>',
          created() {
              console.log(this.$route.params)  
              //结果为： {’id':10}
          },
      }
      // 实例使用
      const vueRoute = new VueRouter({
          routes: [
              { path: '/login', component: login },
              { path: '/register/{id}', component: register }
              // { path: '/register/:id, component: register }
          ]
      })
      const vm = new Vue({
          el: '#app',
          // 建立关系
          router: vueRoute
      })
  
  </script>
  

使用children属性实现路由嵌套

• children 表示当前路由下的子路由，和path一样是一个数组

• path 必须以父路由开头，否则无法展示

  <div id="app">
      <router-link to="/login/1/hzhiwei">登陆</router-link>
      <router-link to="/register">注册</router-link>
      <router-view>
      </router-view>
  </div>
  
  <template id="login">
      <div>
          <h1>登陆组件</h1>
          <router-link to="/login/childrenLogin">childrenLogin</router-link>                     <router-view></router-view>
      </div>
  </template>
  <script>
      let login = {
          template: "#login",
          created:function(){
              console.log(this.$route)
          }
      }
      let register = {
          template: '<h1 >注册组件</h1>'
      }
      let childrenLogin = {
          template: '<h1 >childrenLogin</h1>'
      }
      const router = new VueRouter({
          routes: [
              {
                  path: '/login/:id/:name',
                  component: login,
                  children: [{
                      path: '/login/childrenLogin',
                      component: childrenLogin
                  }]
              },
              {
                  path: '/register', component: register
              },
              {
                  path: '/', redirect: '/login'
              }
          ]
      })
  
      new Vue({
          el: '#app',
          router: router,
          watch: {
              '$route.fullPath':function(newVal,oldVal){
                  console.log(newVal + '--' + oldVal)
              }
          },
  
      })
  </script>
  

命名路由

• 给router-view一个name属性，属性值对应route对象中components的key值，即可完成路由绑定

<div id="app">
    <router-view name="main"></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
    </div>
</div>
<script>
    let main = {
        template: '<h1 class="main">Main</h1>'
    }
    let left = {
        template: '<h1 class="left">Left</h1>'
    }
    let right = {
        template: '<h1 class="right">Right</h1>'
    }

    const router = new VueRouter({
        routes: [
            {
                path: '/', components: {
                    'main': main,
                    'left': left,
                    'right': right
                }
            }
        ]
    })

    new Vue({
        el: '#app',
        router: router

    })

</script>