Vue2從0到1(二)：Vue-router的使用

上一篇講了Vue起步：環境的搭建用webpack打包vue

下面講一下vue路由vue-router

8.使用路由vue-router2

首先安裝 vue-router:

npm install vue-router --save

修改main.js:

1.引入APP,about兩個組件導入router組件
引入子組件Child

import App from './src/index.vue';
    import About from './src/about.vue';
    import Child from './src/children.vue' 
    import VueRouter from 'vue-router';

    Vue.use(VueRouter)

2.定義路由：
嵌套路由用children:[]存放,子組件在父組件的

<router-view></router-view>

中渲染,路由經過 "/:id" 定義參數經過連接 "/about/123"傳遞參數
在組件中經過{{$route.params.id}}獲取傳參

const routes = [
    { path: '/index', component: App },
    { path: '/about/:id', component: About ,children:[
        { path: 'child', component: child}
    ]}
]

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

const router = new VueRouter({
        routes // （縮寫）至關於 routes: routes
    })

1. 建立和掛載根實例。

const app = new Vue({
        router
    }).$mount('#main')

5.修改index.html文件

<div id="main">
        <p>
            <router-link to="/index">index</router-link>
            <router-link to="/about/123">about</router-link>
            <router-link to="/about/123/child">child router</router-link>
        </p>
        <!-- 路由匹配到的組件將渲染在這裏 -->
        <router-view></router-view>
    </div>

6.修改父組件about.vue
寫</template>才發現，只能有一個頂級的HTML標籤

</template>
    <div>
        <div class="message">{{ msg }}</div>
        <div>
        <span>傳遞的參數爲：{{ $route.params.id }}</span>

        <router-view></router-view>
        </div>
    </div>
</template>

8.1路由重定向redirect

routes: [
    ...
    { path: '/a', redirect: '/index' }
  ]

訪問/a時將跳轉值/index對應的組件

8.2 路由懶加載

用vue.js寫單頁面應用時，會出現打包後的JavaScript包很是大，影響頁面加載，咱們能夠利用路由的懶加載去優化這個問題。將路由寫法改成：

//定義路由
const routes = [
    { path: '/index', component: resolve => require(['./src/index.vue'], resolve) },
    {
        path: '/about/:id', component: resolve => require(['./src/about.vue'], resolve) ,
        children:[
            { path: 'child', component: resolve => require(['./src/children.vue'], resolve)}
    ]},
    { path: '/a', redirect: '/index' }
]

8.3 js的方法跳轉路由

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

下一章講解狀態管理Vuex

以上代碼代碼親測可用，託管在github上面，歡迎star

參考文獻:vue-router
效果圖: