Vue 路由通过使用官方提供的 Vue Router 路由管理器实现。具体步骤包含:安装 Vue Router创建路由配置对象集成到 Vue 应用程序在模板中使用路由链接在组件中使用路由信息Vue 路由还支持动态路由、守卫、命名路由和嵌套路由等特性。

Vue 路由
如何实现 Vue 路由?
通过使用 Vue Router,一个官方提供的路由管理器,可以轻松实现 Vue 路由。
步骤:
立即学习“前端免费学习笔记(深入)”;
1. 安装 Vue Router
npm install vue-router
2. 创建路由配置
创建一个 router.js 文件并定义路由配置对象:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
export default new VueRouter({
routes
})3. 集成到 Vue 应用程序
在 main.js 或 app.js 文件中,将路由器实例安装到 Vue 应用程序中:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from './router'
Vue.use(VueRouter)
new Vue({
router,
render: h => h(App)
}).$mount('#app')4. 在模板中使用路由链接
可以使用 v-link 指令在模板中创建导航链接:
About
5. 在组件中使用路由信息
在组件中,可以通过 $route 对象访问当前路由信息,包括 path、params 和 query:
export default {
computed: {
params() {
return this.$route.params
}
}
}其他特性:
- 动态路由:根据动态值设置路由路径。
- 守卫:在导航发生之前或之后执行代码。
- 命名路由:使用名称而不是路径来引用路由。
- 嵌套路由:在一个路由内部定义子路由。











