淘先锋技术网

首页 1 2 3 4 5 6 7

Vue Router 是基于 Vue.js 的官方路由管理器,用来实现SPA(单页应用)的导航管理,可以非常方便地实现跳转、参数传递、页面管理等功能,是 Vue.js 开发中不可或缺的一部分。下面我们将详细说明 Vue Router 2.0 的配置方法。

要使用 Vue Router 2.0,需要在项目中安装 Vue Router,可以使用 NPM 安装最新版本。

npm install vue-router --save

在使用 Vue Router 2.0 前,先在 main.js 引入 Vue,并引入 Vue Router。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

接着,定义一个 Vue Router 实例,并在该实例下定义路由。路由是由“路由映射”组成,每个“路由映射”都由一个URL路径和一个对应的组件构成。这里我们定义了两个“路由映射”:一个是首页,另一个是关于页面。

const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})

在实例化 Vue 时,需要把定义好的 router 实例传入,这样 Vue 实例才能知道路由的存在并使用路由功能。

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

定义好路由后,我们需要在代码中切换路由。使用 Vue Router 2.0 的方法是通过router-link标签,它会自动将 URL 解析成路由然后跳转。在路由映射中定义了哪个 URL 路径对应的组件,就会呈现相应的东西。

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

以上就是 Vue Router 2.0 的配置方法,对于一个简单的页面应用程序来说,以上的内容就足够了。如果有更多的路由需求,Vue Router 2.0 还支持配置“嵌套路由”、“命名路由”、“动态路由”等功能,具体可查阅官方文档。