投稿
  1. 首页
  2. html-js-css

Vue Router

code•2022-5-18•html-js-css•阅读28

Vue Router,第1张

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 to="/">首页</router-link>
    <router-link to="/category">目录</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>
定义路由中需要用到的组件 
    var Index = {template: `
首页功能
`}
    var Category = {template: `
目录功能
`}
    var User = {template: `
用户功能
`}
进行路由规则设置 
    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: `
这是侧边栏功能
`}

    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: `
用户{{$route.params.id}}功能
`}
侦听路由参数 如果要响应路由的参数变化，可以通过 watch 监听 $route 
    var User = {
      template: `
用户{{$route.params.id}}功能
`,
      watch: {
        $route(route) {
          console.log(route)
        }
      }
    }
路由传参处理 这里通过路由的 props 设置数据，并通过组件 props 接收 
    var User = {
      props: ['id'],
      template: `
用户{{ id }}功能
`
    }
    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: `
用户{{ id }}功能
`
    }

    var SideBar1 = {
      template: `
这是侧边栏功能
`
    }

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

    // 进行路由规则设置
    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: `
          
用户功能组件

          用户爱好
          用户信息
          
        `
    }
    var Hobby = {
      template: `
用户爱好
`
    }

    var Info = {
      template: `
          
用户信息组件

          用户信息姓名
          
        `
    }

    var Name = {
      template: `
用户姓名
`
    }

    // 进行路由规则设置
    var routes = [
      { 
        path: '/user', 
        component: User,
        children: [
          {
            path: 'hobby',
            component: Hobby
          },
          {
            path: 'info',
            component: Info,
            children: [
              {
                path: 'name',
                component: Name
              }
            ]
          }
        ]
      }
    ]
编程式导航 的 to 属性使用绑定方式时也可可以是属性对象结构 
    <router-link :to="{ path: '/user'}">用户</router-link>
命名路由 设置路由时添加 name 属性 
    var routes = [
      { 
        path: '/user', 
        component: User,
        name: 'user'
      }
    ]
也可以在 中使用 
    <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'
    })

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/944592.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
codecode管理员组
00
上一篇 2022-05-18
下一篇2022-05-18

发表评论

登录后才能评论

评论列表（0条）

    保存