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。