各位程序员1024节日快乐~
Vue Router 是 Vue.js 的官方路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得简单。以下是 Vue Router 的基本用法
Vue Router 基本用法
安装 Vue Router
首先，你需要安装 Vue Router。如果你使用的是 npm，可以使用以下命令：
npm install vue-router
创建 Router 实例
在你的 Vue 应用中，你需要创建一个 Vue Router 实例，并定义路由。
// 导入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'// 告诉 Vue 使用 Vue Router
Vue.use(VueRouter)// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }// 创建路由配置
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]// 创建 router 实例
const router = new VueRouter({routes // （缩写）相当于 routes: routes
})
在 Vue 实例中使用 Router
将 router 实例传递给 Vue 实例。
const app = new Vue({router,template: `<div id="app"><h1>Hello, Vue Router!</h1><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/about">About</router-link></li></ul><router-view></router-view></div>`
})
路由组件
路由组件是 Vue 组件，但它们是由 Vue Router 管理的。你可以在 <router-view> 元素中渲染路由组件。
路由参数
你可以在路由配置中定义参数：
const routes = [{ path: '/user/:id', component: User }
]
然后在组件中通过 this.$route.params 访问参数：
export default {data() {return {user: null}},created() {this.user = this.$route.params.id}
}
路由导航
你可以使用 <router-link> 组件来创建导航链接，或者使用编程式导航：
<!-- 使用 <router-link> 创建导航链接 -->
<router-link to="/about">About</router-link>
// 编程式导航
this.$router.push('/about')
路由守卫
Vue Router 允许你在路由发生变化之前或之后执行逻辑，称为路由守卫。
const router = new VueRouter({routes,beforeEach: (to, from, next) => {// 在这里执行检查，然后调用 next()next()}
})
路由懒加载
为了减小应用的加载时间，你可以使用路由懒加载：
const router = new VueRouter({routes: [{ path: '/foo', component: () => import('./Foo.vue') }]
})
以上就是 Vue Router 的基本用法。
你可以在 Vue Router 官方文档 中找到更多高级用法和配置选项。
