Vue Router简单使用

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应用程序中，并导航到特定路由。