Vue.js的路由是什么？如何定义一个路由？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
使用 Vue Router,可以将组件映射为路由,并在 URL 变化时动态渲染对应的组件。

定义一个路由需要几个步骤:

1. 安装 vue-router 包:

npm install vue-router

2. 导入并 Vue.use():

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

3. 定义路由组件:

const Foo = { template: '<div>foo</div>' }  
const Bar = { template: '<div>bar</div>' }

4. 配置路由规则:

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

5. 创建Router实例:

const router = new VueRouter({
  routes 
})

6. 在根组件中挂载Router:

new Vue({
  router, 
  render: h => h(App)
})

7. 在模板中使用 router-link 进行导航:

<router-link to="/foo">Go to Foo</router-link> 
<router-link to="/bar">Go to Bar</router-link>

8. 使用 router-view 渲染匹配的组件:

<router-view></router-view>

例如:

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
  routes 
})

// 4. 创建和挂载根实例。
const app = new Vue({
  router 
})

// 5. 在模板中使用 `router-link` 来导航 
<router-link to="/foo">Go to Foo</router-link>

// 6. 使用 `router-view` 来渲染匹配的组件
<router-view></router-view>

Vue Router 是 Vue.js 官方的路由管理器,它可以让我们轻松实现组件的切换和状态的变更,是一个单页面应用不可缺少的功能模块。