Vue Router的基本使用

根据上一篇文章所做的底部导航栏，本文在这里实现通过底部导航栏切换不同的组件。

上一篇文章:Vue 如何实现一个底部导航栏组件

演示

演示

实现

下载Vue Router

npm install vue-router --save

加不加--save可以参考文章

新建组件

首先新建3个组件，每个组件里随便写一些东西。如图1所示

图1:3个新组件

router.js

在src目录下新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 跳转
import Home from 'components/Home'
import StoreList from 'components/StoreList'
import Me from 'components/Me'

Vue.use(VueRouter);

const routes = [
    {
        name: 'Home',
        path: '/home',
        component: Home
    },
    {
        name: 'StoreList',
        path: '/store-list',
        component: StoreList
    },
    {
        name: 'Me',
        path: '/me',
        component: Me
    }
];

const router = new VueRouter({
    routes
});

export default router

const routes中的内容都为配置的路由，这里写了name是为了直接通过name进行路由，比较方便。

注入根实例

在main.js中下如下代码。值得注意的是import当前路径的js文件时一定要在url前面加上"./"，不然会导致调用的this.$router为undefine。

// 坑点 import当前目录的js时必须在前面加上"./"
import router from './router'

Vue.config.productionTip = false;

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

切换页面

上文我写的底部导航栏import在App.vue里，通过底部导航栏暴露的方法，我们就可以很轻松的切换页面了。别忘了在App.vue的template里加上<router-view/>，不然是不会显示出来的。

<TabBar @select-item="onClickTabBarItem"/>

methods: {
        onClickTabBarItem: function (tag) {
            if (tag === 0) {
                this.$router.replace({name: "Home"});
            } else if (tag === 1) {
                this.$router.replace({name: "StoreList"});
            } else if (tag === 2) {
                this.$router.replace({name: "Me"});
            }
        }
    }

想要实现默认进入的就是Home可以在created中直接replace到Home。

created: function () {
        this.$router.replace({name: "Home"});
    }

参考

Vue Router
vue-router 基本使用
this.$router.push相关的vue-router的导航方法