Vue Router是Vue.js官方提供的路由管理器。
可以通过URL映射到Vue组件来构建单页应用程序(SPA)。
1. 安装Vue Router
使用npm或yarn命令行工具,安装Vue Router:
npm install vue-router --save
# 或
yarn add vue-router
2. 配置Vue Router
在Vue应用程序的入口文件中,导入Vue Router并使用Vue.use方法注册它:
import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
const router = newVueRouter({
routes: [
// 在这里配置路由
]
})
在new VueRouter中传递的routes选项是一个路由配置数组,其中每个对象都描述一个路由,它包含一个路径和一个组件。
3. 配置路由
在路由配置数组中,每个路由都包含一个路径和一个组件。例如:
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
这里我们定义了两个路由:
/路径将匹配Home组件。
/about路径将匹配About组件。
4. 集成Vue Router
要将Vue Router集成到Vue应用程序中,需要将其传递给Vue实例,如下所示:
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在Vue实例中传递router选项,以便在整个应用程序中都可以使用Vue Router。此外,还可以将<router-view>组件放置在<template></tempate>中,以便Vue Router可以渲染正确的组件:
<router-view></router-view>
5. 导航到路由
要导航到特定路由
使用<router-link>组件来呈现可点击的链接:
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
或者使用$router.push方法编程方式导航到路由:
// 字符串路径
this.$router.push('/about')
// 命名路由
this.$router.push({ name: 'about' })
// 包含查询参数和hash的对象
this.$router.push({ path: '/about', query: { foo: 'bar' }, hash: '#baz' })
这样,就可以使用Vue Router创建路由,配置路由,将Vue Router集成到Vue应用程序中,并导航到特定路由。