vue-router的基本用法

咱們先理一下vue-router的基本使用方法，而後在上節輸出Hello World!的基礎上加入組件，經過路由實現組件與組件之間的轉換。

 

 

安裝vue-router

npm install vue-router --save-dev

第一步：經過import引入vue、vue-router

router/index.js

//引入vue
import Vue from 'vue';
//引入vue-router
import Router from 'vue-router';
//全局使用vue-router插件
Vue.use(Router);

第二步：定義（路由）組件

router/index.js

//定義路由組件
import Home from '../pages/Home.vue';
import My from '../pages/My.vue';

第三步：定義路由，具體用法

router/index.js

//定義路由
const routes = [
    {
        path:'/home/:name/:id',
        component:Home
    },
    {
        path:'/my/:name/:id',
        component:My
    }
]

第四步：建立router實例

router/index.js

//建立router實例
const router = new Router({
    routes
});
//默認輸出router
export default router;

第五步：在vue實例上掛載router實例

main.js

//引入
import Vue from 'vue';
import router from './router';
import App from './App.vue';

//實例
new Vue({
    router,//掛載router實例
    render:h => h(App)
}).$mount('#app');

第六步：經過router-link組件來導航，具體用法

Footer.vue

<template>
    <footer>
        <ul>
            <li>
                <router-link to="/home/首頁/100">首頁</router-link>
            </li>
            <li>
                <router-link to="/my/個人/200">個人</router-link>
            </li>
        </ul>
    </footer>
</template>

第七步：用router-view組件定義路由出口，路由匹配到的組件內容將渲染到這裏，具體用法

App.vue

<template>
    <div id="app">
        <Header/>
        <section class="mainContainer">
            <router-view/>
        </section>
        <Footer/>
    </div>
</template>

簡單的路由配置完成。想了解更多轉官網

代碼地址：https://github.com/heshaui/vueWebpack。