vue怎么使用路由

如何在 Vue.js 中使用路由

Vue.js 路由是一种管理应用程序中页面导航和状态管理的机制。它允许您轻松地在不同页面之间跳转，并维护每个页面的状态信息。

使用 Vue Router

要使用 Vue Router，需要遵循以下步骤：

立即学习“前端免费学习笔记（深入）”；

1. 安装 Vue Router

   通过 npm 或 yarn 安装 Vue Router：

   npm install vue-router// 或yarn add vue-router

2. 创建路由器实例

   在 Vue.js 应用程序的入口文件中创建一个 Vue Router 实例：

   import Vue from 'vue'import VueRouter from 'vue-router'import Home from './Home.vue'import About from './About.vue'Vue.use(VueRouter)const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/about', component: About },  ]})

3. 在根组件中注册路由器

   在 Vue.js 应用程序的根组件中注册路由器：

   import Vue from 'vue'import App from './App.vue'new Vue({  router,  render: h => h(App),}).$mount('#app')

使用路由导航

在 Vue.js 组件中，可以使用 组件进行路由导航：

<router-link to="/about">关于</router-link>

也可以使用 $router 实例上的 push 和 replace 方法以编程方式导航：

this.$router.push('/about')

获取当前路由信息

可以通过 $route 实例获取当前路由信息：

console.log(this.$route.path) // 输出当前页面的路径console.log(this.$route.params) // 输出当前路由参数