Vue.js 中的路由是什么？如何实现路由跳转？

在 Vue.js 中,路由用于设定不同的视图内容展现方式与跳转。
实现路由的步骤:

1. 安装 vue-router 包:

npm install vue-router

2. 创建 router 目录及 index.js 文件:

js
// router/index.js
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home }  
]

const router = new VueRouter({
  routes 
})

export default router  

3. 在 main.js 中引入并使用:

js
import Vue from 'vue'  
import router from './router'

Vue.use(router)

new Vue({
  router,
  // ...
}) 

4. 使用 router-link 进行路由跳转:

html
<router-link to="/">Home</router-link>

5. 路由出口显示匹配的组件:

html
<router-view></router-view>

6. 路由守卫控制路由访问权限。
7. 嵌套路由实现子路由。
   router-link 是声明式导航,点击时会调用 router.push() 跳转到对应路由。
   <router-view> 是动态渲染匹配的组件。

Vue Router 实现了路由与组件的映射,从而实现页面间的跳转与内容切换。熟练掌握路由的配置和使用,可以让我们构建出更加完善的 SPA。