如何在Vue中实现路由导航？

原创

ithorizon 11个月前 (05-30) 阅读数 136 #VUE

在Vue中实现路由导航

一、简介

在Vue.js框架中，路由是用于构建单页面应用（SPA）的重要功能之一。它允许用户在不重新加载整个页面的情况下，在不同的视图间进行切换。Vue Router是Vue.js的官方路由管理器，它和Vue.js深度集成，让构建路由系统变得易懂而直观。

二、安装Vue Router

首先，你需要确保已经安装了Vue.js。然后，通过npm或yarn来安装Vue Router：

npm install vue-router --save

// 或者

yarn add vue-router

三、创建路由实例

在你的项目中创建一个文件，比如router.js，用来定义路由规则和创建路由实例：


        import Vue from 'vue';
        import VueRouter from 'vue-router';
        Vue.use(VueRouter);
        const routes = [
            { path: '/home', component: Home },
            { path: '/about', component: About }
        ];
        const router = new VueRouter({
            routes // (缩写) 相当于 routes: routes
        });
        export default router;

四、挂载路由

在Vue根实例中挂载路由实例：


        import Vue from 'vue';
        import App from './App.vue';
        import router from './router';
        new Vue({
            el: '#app',
            router,
            render: h => h(App)
        });

五、使用路由组件

在Vue组件中使用标签来创建导航链接，使用标签来显示当前路由对应的组件：


        <template>
            <div id="app">
                <router-link to="/home">Home</router-link>
                <router-link to="/about">About</router-link>
                <router-view></router-view>
            </div>
        </template>

六、动态路由匹配

Vue Router赞成动态路由匹配，你可以在路径中使用冒号(:)来定义参数：


        { path: '/user/:id', component: User }

在User组件中，你可以通过this.$route.params.id来获取到id参数的值。

七、编程式路由导航

除了使用标签进行声明式导航外，你还可以通过调用router实例的方法来进行编程式导航：


        this.$router.push('/home');
        // 或者
        this.$router.replace('/about');
        // 还可以传递对象
        this.$router.push({ path: '/user', params: { userId: '123' } });