[JavaScript知识库]Vue Router

Vue Router 是 Vue.js 的官方插件，用来快 速实现单页应用

前端路由

• 前端路由，指的是 URL 与内容间的映射关系

Hash 方式

• 通过 hashchange 事件监听 hash 变化，并进行网页内容更新

  <div>
    <a href="#/">首页</a>
    <a href="#/category">目录</a>
    <a href="#/user">用户页</a>
  </div>
  <div id="container">首页</div>

    window.onhashchange = function () {
      var container = document.getElementById('container')
      var hash = location.hash.replace('#', '')
      console.log(location.hash)
      var str = ''
      switch (hash) {
        case '/':
          str = '首页功能'
          break
        case '/category':
          str = '目录页功能'
          break
        case '/user':
          str = '用户页功能'
          break
      }
      container.innerHTML = str
    }

• 封装以备复用

    var router = {
      // 存储路由和回调函数的对应关系
      routes: {},
      // 定义路由规则的方法
      route: function (path, callback) {
        this.routes[path] = callback
      },
      // 初始化路由方法
      init: function () {
        var that = this
        window.onhashchange = function () {
          // 当 hash 更改后，获取新的hash
          var path = location.hash.replace('#', '')
          // 触发对应的回调函数
          that.routes[path] && that.routes[path]()
        }
      }

    }
    var container = document.getElementById('container')
    // 路由和函数的对应关系
    router.route('/', () => {
      container.innerHTML = '首页功能'
    })
    router.route('/category', () => {
      container.innerHTML = '目录页功能'
    })
    router.route('/user', () => {
      container.innerHTML = '用户页功能'
    })
    // 初始化路由
    router.init()

特点总结：

• Hash 方式兼容性好
• 地址中具有 #，不太美观
• 前进后退功能较为繁琐

History 方式

• History 方式采用 HTML5 提供的新功能实现前端路由

  <div>
    <a href="/">首页</a>
    <a href="/category">目录</a>
    <a href="/user">用户页</a>
  </div>
  <div id="container">首页功能</div>

• 在操作时需要通过 history.pushState() 变更 URL并执行对应操作

    var router = {
      // 存储路由和回调函数的对应关系
      routes: {},
      // 定义路由规则的方法
      route: function (path, callback) {
        this.routes[path] = callback
      },
      // 用于触发指定的路由操作
      go(path) {
        console.log(path)
        // 更改路由
        history.pushState(null, null, path)
        // 触发路由对应的回调函数
        this.routes[path] && this.routes[path]()
      }
    }

    var links = document.querySelectorAll('a')
    var container = document.querySelector('#container')
    links.forEach(function(ele) {
      ele.onclick = function (e) {
        // 获取 被点击的链接对应的路由
        var path = e.target.getAttribute('href')
        // 更改路由
        router.go(path)
        return false
      }
    })

    // 路由和函数的对应关系
    router.route('/', () => {
      container.innerHTML = '首页功能'
    })
    router.route('/category', () => {
      container.innerHTML = '目录页功能'
    })
    router.route('/user', () => {
      container.innerHTML = '用户页功能'
    })

• 前进后退功能，首先需要在更改 url 时保存路由标记

        // 更改路由
        history.pushState({path: path}, null, path)

• 通过 popstate 事件监听前进后退按钮操作，并检测 state

      // 初始化路由，检测前进后退
      init() {
        var that = this
        window.addEventListener('popstate', function (e) {
          var path = e.state ? e.state.path : '/'
          that.routes[path] && that.routes[path]()
        })
      }

• 调用初始化方法监听前进后退操作并处理

    router.init()

Vue Router

• 是 Vue.js 官方的路由管理器，让构建单页 面应用变得易如反掌

基本使用

• Vue Router 提供了用于进行路由设置的组件 <router-link> 与 <router-view>

    <router-link to="/">首页</router-link>
    <router-link to="/category">目录</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>

• 定义路由中需要用到的组件

    var Index = {template: `<p>首页功能</p>`}
    var Category = {template: `<p>目录功能</p>`}
    var User = {template: `<p>用户功能</p>`}

• 进行路由规则设置

    var routes = [
      {path: '/', component: Index},
      {path: '/category', component: Category},
      {path: '/user',component: User}
    ]

• 创建 Vue Router 实例，通过 routes 属性配置路由

    var router = new VueRouter({
      routes: routes
    })

• 创建 Vue 实例，通过 router 属性注入路由

    var vm = new Vue({
      el: '#app',
      router
    })

命名视图

• 如果导航后，希望同时在同级展示多个视图(组件)，这时就需要进行命名视图

    <router-view name="sidebar"></router-view>
    <router-view></router-view>

• 路由中通过 components 属性进行设置不同视图的对应组件

var SideBar = {template: `<p>这是侧边栏功能</p>`}

    var routes = [
      {path: '/', components: {
        sidebar: SideBar,
        default: Index
      }},
      {path: '/category', component: Category},
      {path: '/user',component: User}
    ]

动态路由

• 当我们需要将某一类 URL 都映射到同一个组件，就需要使用动态路由

    var routes = [
      {path: '/user/:id',component: User}
    ]

• 设置为动态路由后，动态部分为任意内容均跳转到同一组件

    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>

• 部分对应的信息称为路径参数，存储在 vm.$route.params 中

    var User = {template: `<p>用户{{$route.params.id}}功能</p>`}

侦听路由参数

• 如果要响应路由的参数变化，可以通过 watch 监听 $route

    var User = {
      template: `<p>用户{{$route.params.id}}功能</p>`,
      watch: {
        $route(route) {
          console.log(route)
        }
      }
    }

路由传参处理

• 这里通过路由的 props 设置数据，并通过组件 props 接收

    var User = {
      props: ['id'],
      template: `<p>用户{{ id }}功能</p>`
    }
    var routes = [
      { path: '/user/:id', component: User ,props: true}
    ]

• 包含多个命名视图时，需要将路由的 props 设置为对象
• 如果希望设置静态数据，可将 props 中的某个组件对应的选项设 置为对象，内部属性会绑定给组件的 props

  <div id="app">
    <!-- Vue Router 提供了用于进行路由设置的组件 <router-link> 与 <router-view></router-view> -->
    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>

    <router-view></router-view>
    <router-view name="sidebar1"></router-view>
    <router-view name="sidebar2"></router-view>
  </div>

    // 定义路由中需要用到的组件
    var User = {
      props: ['id'],
      template: `<p>用户{{ id }}功能</p>`
    }

    var SideBar1 = {
      template: `<p>这是侧边栏功能</p>`
    }

    var SideBar2 = {
      props: ['a', 'b'],
      template: `<p>这是侧边栏{{ a }}、{{ b }}功能</p>`
    }

    // 进行路由规则设置
    var routes = [
      { 
        path: '/user/:id', 
        components: {
          default: User,
          sidebar1: SideBar1,
          sidebar2: SideBar2
        },
        props: {
          default: true,
          sidebar1: false,
          sidebar2: {
            a: 1,
            b: 2
          }
        }}
    ]

嵌套路由

• 使用 children 来进行嵌套路由中的子路由设置

    // 定义路由中需要用到的组件
    var User = {
      template: `<div>
          <p>用户功能组件</p>
          <router-link to="/user/hobby">用户爱好</router-link>
          <router-link to="/user/info">用户信息</router-link>
          <router-view></router-view>
        </div>`
    }
    var Hobby = {
      template: `<p>用户爱好</p>`
    }

    var Info = {
      template: `<div>
          <p>用户信息组件</p>
          <router-link to="/user/info/name">用户信息姓名</router-link>
          <router-view></router-view>
        </div>`
    }

    var Name = {
      template: `<p>用户姓名</p>`
    }

    // 进行路由规则设置
    var routes = [
      { 
        path: '/user', 
        component: User,
        children: [
          {
            path: 'hobby',
            component: Hobby
          },
          {
            path: 'info',
            component: Info,
            children: [
              {
                path: 'name',
                component: Name
              }
            ]
          }
        ]
      }
    ]

编程式导航

• <router-link> 的 to 属性使用绑定方式时也可可以是属性对象结构

    <router-link :to="{ path: '/user'}">用户</router-link>

命名路由

• 设置路由时添加 name 属性

    var routes = [
      { 
        path: '/user', 
        component: User,
        name: 'user'
      }
    ]

• 也可以在 <router-link> 中使用

    <router-link :to="{ name: 'user', params: {id: 1, name: 'zm'}}">用户</router-link>

其他功能

重定向

    // 进行路由规则设置
    var routes = [
      {
        path: '/category',
        redirect: '/'
      }
    ]

别名

    // 进行路由规则设置
    var routes = [
      { 
        path: '/category/:id', 
        component: Category,
        props: true,
        alias: '/:id'
      }

导航守卫

    router.beforeEach(function (to, from, next) {
      if (to.path === '/category') {
        next('/user')
      } else {
        next()
      }
    })

History 模式

• 需要通过 Vue Router 实例的 mode 选项来设置

    // 创建 Vue Router 实例，通过 routes 属性配置路由
    var router = new VueRouter({
      routes,
      mode: 'history'
    })

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖