【轉】使用Vue-Router 2實現路由功能

時間 2019-11-09

原文原文鏈接

請輸入代碼注意：vue-router 2只適用於Vue2.x版本，下面咱們是基於vue2.0講的如何使用vue-router 2實現路由功能。
推薦使用npm安裝。html

npm install vue-router

1、使用路由
在main.js中，須要明確安裝路由功能：vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)vue-router

1.定義組件，這裏使用從其餘文件import進來npm

import index from './components/index.vue'
import hello from './components/hello.vue'

2.定義路由數組

const routes = [
    { path: '/index', component: index },
    { path: '/hello', component: hello },
]

3.建立 router 實例，而後傳 routes 配置app

const router = new VueRouter({
  routes
})

4.建立和掛載根實例。經過 router 配置參數注入路由，從而讓整個應用都有路由功能ui

const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

通過上面的配置以後呢，路由匹配到的組件將會渲染到App.vue裏的<router-view></router-view>
那麼這個App.vue裏應該這樣寫：code

<template>
  <div id="app">
        <router-view></router-view>
  </div>
</template>
index.html裏呢要這樣寫：
<body>
    <div id="app"></div>
</body>

這樣就會把渲染出來的頁面掛載到這個id爲app的div裏了。
2、重定向 redirectcomponent

const routes = [
    { path: '/', redirect: '/index'},     // 這樣進/ 就會跳轉到/index
    { path: '/index', component: index }
]

3、嵌套路由router

const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: info}
        ]
     }
]

經過/index/info就能夠訪問到info組件了
4、懶加載

const routes = [
    { path: '/index', component: resolve => require(['./index.vue'], resolve) },
    { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

經過懶加載就不會一次性把全部組件都加載進來，而是當你訪問到那個組件的時候纔會加載那一個。對於組件比較多的應用會提升首次加載速度。
5、<router-link>
在vue-router 1中，使用的是
在vue-router 2中，使用了<router-link></router-link>替換1版本中的a標籤

<router-link to="home">Home</router-link>

<a href="home">Home</a>

<router-link v-bind:to="'home'">Home</router-link>

<router-link :to="'home'">Home</router-link>

<router-link :to="{ path: 'home' }">Home</router-link>

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

6、路由信息對象
1.$route.path
字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。

2.$route.params
一個 key/value 對象，包含了動態片斷和全匹配片斷，若是沒有路由參數，就是一個空對象。

3.$route.query
一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，若是沒有查詢參數，則是個空對象。

4.$route.hash
當前路由的 hash 值 (不帶 #) ，若是沒有 hash 值，則爲空字符串。

5.$route.fullPath
完成解析後的 URL，包含查詢參數和 hash 的完整路徑。

6.$route.matched
一個數組，包含當前路由的全部嵌套路徑片斷的路由記錄。路由記錄就是 routes 配置數組中的對象副本（還有在 children 數組）。
綜合上述，一個包含重定向、嵌套路由、懶加載的main.js以下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
  routes:[
    { path: '/', redirect: '/index' },
    { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
        children:[
            { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
       ]
    },
    { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
  ]
})
const app = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

相關標籤/搜索

每日一句

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