VUE進階(路由等)

時間 2019-11-13

原文原文鏈接

vue2.0+elementUI構建單頁面後臺管理平臺： http://www.cnblogs.com/dmcl/p/6722315.html
初級教程：http://www.cnblogs.com/dmcl/p/6137469.htmlcss

VUE進階

自定義指令

http://cn.vuejs.org/v2/guide/custom-directive.html#簡介html

// 註冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

使用 <input v-focus>vue

路由

文檔來自：http://router.vuejs.org/zh-cn/es6

簡單路由示例

<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.3"></script>
</head>
<body>
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 組件來導航. -->
        <!-- 經過傳入 `to` 屬性指定連接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
</div>
<script>
    // 0. 若是使用模塊化機制編程， 要調用 Vue.use(VueRouter)
    // 1. 定義（路由）組件。能夠從其餘文件 import 進來
    const Foo = { template: '<div>foo</div>' };
    const Bar = { template: '<div>bar</div>' };

    // 2. 定義路由映射 
    // 每一個路由應該映射一個組件。 其中"component" 能夠是經過 Vue.extend() 建立的組件構造器，或者，只是一個組件配置對象。
    const my_routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ];

    // 3. 建立 router 實例，而後傳 `routes` 配置 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
    const app_router = new VueRouter({
        routes:my_routes // （縮寫）至關於 routes: routes
    });

    // 4. 建立和掛載根實例。記得要經過 router 配置參數注入路由，從而讓整個應用都有路由功能
    const app = new Vue({
        router:app_router
    }).$mount('#app');
    // 如今，應用已經啓動了！
</script>

當對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active vue-router

組件嵌套

<div id="app2">
    <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>
<script>
    const User = {
        template: `
    <div class="user">
      <h2>User {{ $route.params.my_id }}</h2>
      <router-view></router-view>
    </div>
  `
    };
//上面的$route.params.my_id，my_id是匹配的參數,是顯示文本 與路由無關
    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/:my_id', component: User,
                children: [
                    //
                    { path: '', component: UserHome },
                    // 當 /user/:id/profile 匹配成功， UserProfile 會被渲染在 User 的 <router-view> 中
                    { path: 'profile', component: UserProfile },
                    // 同上
                    { path: 'posts', component: UserPosts }
                ]
            }
        ]
    });
    const app2 = new Vue({ router }).$mount('#app2')
</script>

編程式導航
使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名路由  name  
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

replace(location) 相似push 但不改變history
router.go(1) ；
這些方法都是模仿window.historyAPI的window.history.pushState、window.history.replaceState 和 window.history.go
:to和to是同樣的編程

命名路由例子

<div id="app3"></div>
<script>
    Vue.use(VueRouter)
    //組件
    const Home = { template: '<div>This is Home</div>' }
    const Foo2 = { template: '<div>This is Foo</div>' }
    const Bar2 = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
    //路由
    const router3 = new VueRouter({
//        mode: 'history',
        routes: [
            { path: '', name: 'home', component: Home },
            { path: 'foo2', name: 'foo22', component: Foo2 },  // url:  /foo2
            { path: 'bar2/:id', name: 'bar22', component: Bar2 } // url:  /bar2/123
        ]
    });
    new Vue({
        router:router3,
        template: `
    <div id="app3">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo22' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar22', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
    }).$mount('#app3')
</script>

命名視圖
一個視圖纔有一個組件渲染。一個路由多個視圖就要用多個組件。

路由寫法：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

代碼參考：https://jsfiddle.net/posva/6du90epg/後端

重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

也能夠是 { path: '/a', redirect: { name: 'foo' }}
也能夠是（結合ES6箭頭函數，箭頭函數可參考：https://imququ.com/post/arrow-function-in-es6.html ）app

{ path: '/dynamic-redirect/:id?',
      redirect: to => {
        const { hash, params, query } = to
        if (query.to === 'foo') {
          return { path: '/foo', query: null }
        }
        if (hash === '#baz') {
          return { name: 'baz', hash: '' }
        }
        if (params.id) {
          return '/with-params/:id'
        } else {
          return '/bar'
        }
      }
    },

更多用法參考：http://router.vuejs.org/zh-cn/essentials/redirect-and-alias.htmlide

別名
重定向是真的指向了新的路徑而別名只是換了個名字b 生效的仍是a
{ path: '/a', component: A, alias: '/b' }
history 與 404
mode: 'history',
須要後端配置
鉤子
參考： http://router.vuejs.org/zh-cn/advanced/navigation-guards.html

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

before鉤子：to 即將進入的 from 當前導航要離開的 next 來執行鉤子
after 鉤子:
未完待續模塊化

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。