zoukankan      html  css  js  c++  java
  • vue-router 注意事项

    1、vue-router 两种模式

    (1)mode:hash,hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件。vue默认为hash模式

    window.onhashchange = function(event){
     
        console.log(event.oldURL, event.newURL);
        let hash = location.hash.slice(1);
        document.body.style.color = hash;
    }

    (2)mode:history

    const router = new VueRouter({    
        mode:"history",
        routes:[]
    })

    不怕前进,不怕后退,就怕刷新F5,如果后端没有准备的话,刷新是实实在在地去请求服务器的。

    在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题,但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会刷出一个404来。

     2、嵌套路由

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <div id="app">
      <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/foo/profile">/user/foo/profile</router-link>
        <router-link to="/user/foo/posts">/user/foo/posts</router-link>
      </p>
      <router-view></router-view>
    </div>
    const User = {
      template: `
        <div class="user">
          <h2>User {{ $route.params.id }}</h2>
          <router-view></router-view>
        </div>
      `
    }
    
    const UserHome = { template: '<div>Home</div>' }
    const UserProfile = { template: '<div>Profile</div>' }
    const UserPosts = { template: '<div>Posts</div>' }
    
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User,
          children: [
            // UserHome will be rendered inside User's <router-view>
            // when /user/:id is matched
            { path: '', component: UserHome },
                    
            // UserProfile will be rendered inside User's <router-view>
            // when /user/:id/profile is matched
            { path: 'profile', component: UserProfile },
    
            // UserPosts will be rendered inside User's <router-view>
            // when /user/:id/posts is matched
            { path: 'posts', component: UserPosts }
          ]
        }
      ]
    })
    
    const app = new Vue({ router }).$mount('#app')

    3、嵌套命名视图

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <div id="app">
      <h1>Nested Named Views</h1>
      <router-view></router-view>
    </div>
    const UserSettingsNav = {
        template: `
    <div class="us__nav">
      <router-link to="/settings/emails">emails</router-link>
      <br>
      <router-link to="/settings/profile">profile</router-link>
    </div>
    `
    }
    const UserSettings = {
        template: `
    <div class="us">
      <h2>User Settings</h2>
      <UserSettingsNav/>
      <router-view class ="us__content"/>
      <router-view name="helper" class="us__content us__content--helper"/>
    </div>
      `,
      components: { UserSettingsNav }
    }
    
    const UserEmailsSubscriptions = {
        template: `
    <div>
        <h3>Email Subscriptions</h3>
    </div>
      `
    }
    
    const UserProfile = {
        template: `
    <div>
        <h3>Edit your profile</h3>
    </div>
      `
    }
    
    const UserProfilePreview = {
        template: `
    <div>
        <h3>Preview of your profile</h3>
    </div>
      `
    }
    
    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '/settings',
          // You could also have named views at tho top
          component: UserSettings,
          children: [{
              path: 'emails',
            component: UserEmailsSubscriptions
          }, {
              path: 'profile',
            components: {
                default: UserProfile,
              helper: UserProfilePreview
            }
          }]
        }
      ]
    })
    
    router.push('/settings/emails')
    
    new Vue({
        router,
      el: '#app'
    })
  • 相关阅读:
    Treap 树堆 容易实现的平衡树
    (转)Maven实战(二)构建简单Maven项目
    (转)Maven实战(一)安装与配置
    根据请求头跳转判断Android&iOS
    (转)苹果消息推送服务器 php 证书生成
    (转)How to renew your Apple Push Notification Push SSL Certificate
    (转)How to build an Apple Push Notification provider server (tutorial)
    (转)pem, cer, p12 and the pains of iOS Push Notifications encryption
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 2/2
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 1/2
  • 原文地址:https://www.cnblogs.com/stonespawn/p/9680710.html
Copyright © 2011-2022 走看看